Ask your WordPress questions! Pay money and get answers fast! (more info)

looking for a plugin for a certain effect WordPress

  • SOLVED

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#


Answers (2)

2012-11-01

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.

2012-11-01

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..