Hi! Does anyone know if there exist a plugin or knows how to make this effect:
Check the website and click in the upper right "newsletter link".
It pushes the site down like a toggle and shows new content.
http://kantt.dk/say_hello#
Dbranes answers:
Hi
Here are toogle plugins that you might find useful:
[[LINK href="http://wordpress.org/extend/plugins/toggle-box/screenshots/"]]http://wordpress.org/extend/plugins/toggle-box/screenshots/[[/LINK]]
[[LINK href="http://wordpress.org/extend/plugins/toggler/screenshots/"]]http://wordpress.org/extend/plugins/toggler/screenshots/
[[/LINK]]
This can be easily made by using jQuery, see fx here:
[[LINK href="http://www.9zap.com/jquery/hide-and-show-a-div-using-jquery"]]http://www.9zap.com/jquery/hide-and-show-a-div-using-jquery
[[/LINK]]
[[LINK href="http://wpcult.com/how-to-showhide-any-div-box-with-jquery-in-wordpress/"]]http://wpcult.com/how-to-showhide-any-div-box-with-jquery-in-wordpress/[[/LINK]]
Hope this helps.
Christianto answers:
Hi,
This is just hide show function, you can use jQuery plugin,
there a lot of option if you google "show hide jQuery plugin".
Basically it require you to create an element as a box that will be hidden for example:
<div id="newsletter_container"></div>
And an element to bind hide/show process for example if we click a <div> or <a> with class="btn_newsletter"
Then you can use this custom jQuery method..
jQuery(document).ready(function($){
$.fn.hideShowIt = function(opts){
this.extend(opts, {
clicked: 'a',
slideTime: 1000,
targetClass: 'closed'
});
this.each(function(){
var cbox = $(this);
cbox.hide().addClass(opts.targetClass);
$(opts.clicked).click(function(e){
e.preventDefault();
if(cbox.hasClass('closed')){
cbox.slideDown(opts.slideTime);
cbox.removeClass(opts.targetClass);
} else {
cbox.slideUp(opts.slideTime);
cbox.addClass(opts.targetClass);
}
});
});
}
/*
********** Example to use it how to used it ************
#newsletter_container is <div id="newsletter_container"> element you want to hide/show,
.btn_newsletter is element to bind the mouse click event to show/hide (in this case all element with class="btn_newsletter"
*/
$('#newsletter_container').hideShowIt({ clicked: '.btn_newsletter', slideTime: 2000 });
});
as you can see, we can use it to other element, by changing the selector and option.
$('#my-other-div-id').hideShowIt({ clicked: '.my-other-button-classr', slideTime: 2000 });
Hope this help..