Title

Formulier test

description

Published 2022-12-21

Modified 2022-12-21

content

jQuery + CSS Print an Elementor page to PDF

Inschrijven voor 'jQuery + CSS Print an Elementor page to PDF'

HTML CSS Open on hover button

Inschrijven voor 'HTML CSS Open on hover button'

Set HTML widget to dislay inline or fixed width and add ID “expandbutton”

				
					<div class="expand-flex-button">
    	<div class="button-link" style="display:none;">
	        <a href="https://www.ronaldpostma.com">Do Something?</a>
        </div>
        <div class="button-icon">
		    <i aria-hidden="true" class="fas fa-chevron-left"></i>
	    </div>
</div>
				
			
				
					#expandbutton .expand-flex-button {display: flex;background-color:#D55059;border-radius:6px 0px 0px 6px;padding:6px 0px;}
#expandbutton .expand-flex-button * {display:inline-block;color:white;font-weight:600;font-size:16px;}
#expandbutton .button-icon {padding:0px 12px;transition:transform 400ms;}
#expandbutton .button-link {padding-left:12px;}
#expandbutton.opened .button-icon {transform:rotate(-180deg);}
				
			
				
					jQuery(function($){
	// AANMELDEN KNOP
	if ($(window).width() <= 1024) {
		$('#expandbutton .button-icon').click(function(){
			$('#expandbutton').toggleClass('opened');
			$('#expandbutton .button-link').fadeToggle();
		});
		$('main').click(function(){
			$('#expandbutton.opened').removeClass('opened');
			$('#expandbutton .button-link:visible').fadeOut();
		});
	}
	if ($(window).width() > 1024) {
		$('#expandbutton').hover(function(){
			$(this).toggleClass('opened');
			$('#expandbutton .button-link').fadeToggle();
		});
	}
}); 
				
			

Sources & References