<div class="form-group">
	<div class="input-group mb-2">
		<input autocomplete="off" type="password" name="password" class="form-control" id="password" placeholder="password" value="hey_i'm_a_secret_passwort_:)">
		<div class="input-group-append">
			<div id="togglePasswort" class="input-group-text">
				<i class="fa fa-eye-slash" aria-hidden="true"></i>
			</div>
		</div>
	</div>
</div>
			

				if ( jQuery('div#togglePasswort').length ) {
	jQuery('div#togglePasswort').on('click', function() {
		var type	=	jQuery(this).closest('div.form-group').find('input').attr('type');
		if ( type == 'password' ) {
			jQuery(this).closest('div.form-group').find('input').attr('type', 'text');
		} else {
			jQuery(this).closest('div.form-group').find('input').attr('type', 'password');
		}
		jQuery(this).find('i').toggleClass('fa-eye-slash fa-eye');
	});
}
			

				<table>
    <thead>
        <tr>
            <th class="order">Vorname</th>
            <th class="order">Name</th>
            <th class="order">Alter</th>
            <th class="order">Größe</th>
            <th class="order">Geschlecht</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
			

				jQuery('th.order').on('click', function() {
    // add active class
    if ( !jQuery(this).hasClass('active') ) {
        jQuery('th.order').removeClass('active').removeClass('desc').removeClass('asc');
        jQuery(this).addClass('active');
    }
    
    // Add ASC or DESC
    if ( jQuery(this).hasClass('desc') ) {
        jQuery(this).removeClass('desc').addClass('asc');
    } else {
        jQuery(this).removeClass('asc').addClass('desc');
    }

    // Call sort function
    sort();						
});
			

				function sort() {
    var table = jQuery('table');

    jQuery('th.order')
        .each(function() {

            if ( jQuery(this).hasClass('desc') ) {
                var th = $(this),
                    thIndex = th.index(),
                    inverse = false;
            } else {
                var th = $(this),
                    thIndex = th.index(),
                    inverse = true;
            }
            
            th.click(function(){
                table.find('td').filter(function(){
                    return jQuery(this).index() === thIndex;
                }).sortElements(function(a, b){
                    return jQuery.text([a]) > $.text([b]) ?
                        inverse ? -1 : 1
                        : inverse ? 1 : -1;
                    
                }, function(){
                    return this.parentNode; 
                });
                
                inverse = !inverse;
                    
            });
                
        });
} sort();
			

				function inview() {
	var scrollTop	=	jQuery(window).scrollTop();    // Ermittelt den Abstand vom Top

	// each - durchsucht euren Code nach den Elementen
	jQuery('div#scrollWrapper div').each(function() {
		
		// Prüfen, ob Element im sichtbaren Bereich ist
		if( jQuery(this).offset().top + ( jQuery(this).height() / 2 )  > scrollTop ) {

			 // Prüfen, ob das Element bereits die Klasse inview hat
			 if ( !jQuery(this).hasClass('inview')) {
				jQuery('div#scrollWrapper div').removeClass('inview');
				jQuery(this).addClass('inview');
			}
			
			// Nach dem ersten gefundenem Element wird die each abgebrochen
			return false;				
		}
	}); 
} inview();
			

				jQuery(window).scroll(function() {
	inview();
});
			

				https://www.instagram.com/oauth/authorize?client_id={Instagram_App_ID}&redirect_uri={Redirect_URI}&scope=user_profile,user_media&response_type=code
			

				https://www.instagram.com/oauth/authorize?client_id=494098441261999&redirect_uri=https://www.revilodesign.de/&scope=user_profile,user_media&response_type=code
			

				https://www.revilodesign.de/?code=AQB........ HjDQ#_
			

				curl --location --request POST "https://api.instagram.com/oauth/access_token" \
--form "client_id={APP_ID}" \
--form "client_secret={SECRET_CODE}" \
--form "grant_type=authorization_code" \
--form "redirect_uri={REDIRECT_URI}" \
--form "code={KURZLEBIGER_CODE}"
			

				curl --location --request POST "https://api.instagram.com/oauth/access_token" \
--form "client_id=494098441261999" \
--form "client_secret=202e1c9.......................530b" \
--form "grant_type=authorization_code" \
--form "redirect_uri=https://www.revilodesign.de/" \
--form "code=AQB........ HjDQ"
			

				{ "access_token": "IGQVJ...", "user_id": 17841406902143397 }
			

				curl -i -X GET "https://graph.instagram.com/access_token?grant_type=ig_exchange_token&client_secret={SECRET_CODE}&access_token={ACCESS_TOKEN}"
			

				curl -i -X GET "https://graph.instagram.com/access_token?grant_type=ig_exchange_token&client_secret=202e1c9.......................530b&access_token=IGQVJ..."
			

				{"access_token":"IGQV................ZADdB","token_type":"bearer","expires_in":5183999}
			

				curl -i -X GET "https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_token&access_token=IGQVJY................NBOG1n"
			

				https://graph.instagram.com/me/media?fields=id,caption&access_token={ACCESS_TOKEN}
			

				{
   "data": [
      {
         "id": "17883454531458320",
         "caption": "I updated my #website. #checkout #webdesign #webdesigner #developer #revilodesign #website #homepage #newwebsite"
      },
      {
         "id": "17970306580215687",
         "caption": "#newwebsite #webdesign #webdesigner #webtrends #grafikdesign #frontenddeveloper #revilodesign #programming #work #websitedesign #animation #php #css #css3 #html #htmlcss #spot9 #comingsoon"
      },
      {
         "id": "18002822650090275",
         "caption": "#easypeasy #newwebsite #websitedesign #webdesign #webs#websitedesigner #webdesigner #programming #internetseite #shisha #work#worklife #shishatime #shishaathome #mac #apple #relaunch #dlpersonal #revilodesign"
      },
      ....
      ....
      ....
],
   "paging": {
      "cursors": {
         "before": "QVFIUnB0eXN2YTliTXRUS1VMeFlCcmJaU3ZAlY3g2MTVGTnpqY2U4cDB6MzNtZA1Y1aDQtMk1ITnNRYWI4RWxVSDQzYVFyLXJhbTRGd2dVTzdyUlBXakZAqbzFn",
         "after": "QVFIUmhqMUdtbXBFY1RRSElESzRxOVN6WWlrYVdLMllpNWZANUkhKcEU3dURlV0wyRGlsWVhZATlpzZAXJvMm8zSkhHUGFPWGVncFNrME9aOFNUUU1haHhkUGFn"
      },
      "next": "https://graph.instagram.com/v1.0/17841406902143397/media?access_token={ACCESS_TOKEN}"
   }
}
			

				https://graph.instagram.com/17883454531458320?fields=id,media_type,media_url,username,timestamp&access_token={ACCESS_TOKEN}
			

				<div id="example1">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <div id="box4">4</div>
</div>
			

				jQuery( function() {
    jQuery( "div#example1" ).sortable();
});
			

				jQuery( function() {
    jQuery( "div#example2" ).sortable({
		placeholder	:	'box placeholder',
    });
});
			

				jQuery( function() {
    jQuery( "div#example3" ).sortable({
		placeholder	:	'box placeholder',
        fixed		:	'div.box.fixed',
		items		:	'div.box:not(.fixed)',
    });
});
			

				<div class="box-remove"></div>
			

				jQuery('div#example5 div.box div.box-remove').on('click', function() {
    var id  =   jQuery(this).parent().attr('id');
    removeBox(id);
});

function removeBox(id) {
	jQuery('div#example5 div#' + id).remove();
}
			

				<div id="empty" class="box empty">
        <div class="box-content">
            <div class="select transition">
                <div class="chooser">
                    <ul>
                        <li class="box-1" data-box="1">Box 1 <small>hinzufügen</small></li>
                        <li class="box-2" data-box="2">Box 2 <small>hinzufügen</small></li>
                        <li class="box-3" data-box="3">Box 3 <small>hinzufügen</small></li>
                        <li class="box-4" data-box="4">Box 4 <small>hinzufügen</small></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
			

				// OPEN SELECT
jQuery('div#example6 div.box.empty div.select').on('click', function() {
    jQuery(this).toggleClass('open');
});

jQuery('body').click(function(e) {
    if (jQuery(e.target).closest('div#example6 div.box.empty div.select').length === 0) {
        jQuery('div#example6 div.box.empty div.select').removeClass('open');
    }
});
			

				// ADD BOX
function addBox( id ) {
	if ( id ) {
        var html = '<div id="box-' + id + '" class="box" draggable="true" data-box="box-' + id + '">' +
            '<div class="box-remove"></div>' +
            '<div class="box-content">' +
            '<div class="inner"><h2>' + id + '</h2></div>' +
            '</div>' +
            '</div>';
	jQuery(html).insertBefore( 'div#example6 div.box.empty' );
        removeBox();
	}
}
jQuery('div#example6 li').on('click', function() {
    var id  =   jQuery(this).attr('data-box');
    jQuery(this).hide();
    addBox(id);
})
			

				// REMOBVE BOX
jQuery('div#example6 div.box div.box-remove').on('click', function() {
    var id  =   jQuery(this).parent().attr('id');
    removeBox(id);
});

function removeBox(id) {
    if ( id ) {
        jQuery('div#example6 div#' + id).remove();
        jQuery('div#example6 li.' + id).show();
    } else {
        jQuery('div#example6 div.box div.box-remove').on('click', function() {
            var id  =   jQuery(this).parent().attr('id');
            removeBox(id);
        });
    }
}
			

				// MAX SHOW
function maxShow() {
    var max     =   2;
    var count	=	0;

	jQuery('div#example7 div.box-count').each(function() {
		count			+=	1;
	});

    if ( count >= max ) {
		jQuery('div#example7 div.box.empty').hide();
	} else {
		jQuery('div#example7 div.box.empty').show();
	}
}
			

				<input type="checkbox" />

<span class="slideControl"></span>
			

				jQuery('span.slideControl').on('click', function() {

	var state	=	jQuery( 'input' ).prop('checked');
	
	if ( state == true ) {
		jQuery( this ).removeClass('active');
		jQuery( 'input' ).prop('checked', false );
	} else if ( state == false ) {
		jQuery( this ).addClass('active');
		jQuery( 'input' ).prop('checked', true );
	}

});