jQuery toggle

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script>
$(document).ready(function(){
$(“#hide”).click(function(e){
$(“.custom-filter”).hide();
e.preventDefault();
});
$(“#show”).click(function(e){
$(“.custom-filter”).show();
e.preventDefault();
});
});

if change button value on hide and show

<script>
jQuery(document).ready(function(){
jQuery(“#moreoption”).click(function(e){
if(jQuery(“.custom-filter”).is(‘:visible’)){
jQuery(“#moreoption”).html(‘More options’)
}
else{
jQuery(“#moreoption”).html(‘Less options’)
}
jQuery(“.custom-filter”).toggle();
e.preventDefault();
});
});
jQuery(“#moreoption”).button().toggle(function() {
jQuery(this).button(‘option’, ‘label’, ‘Stop’);
}, function() {
jQuery(this).button(‘option’, ‘label’, ‘Start’);
});
</script>

You can change default to display (Hide or Show)

<script>
jQuery(document).ready(function(){
jQuery(“#custom-filter”).css(‘display’,’none’);
jQuery(“#moreoption”).click(function(e){
if(jQuery(“.custom-filter”).is(‘:visible’)){
jQuery(“#moreoption”).html(‘More options’)
}
else{
jQuery(“#moreoption”).html(‘Less options’)
}
jQuery(“.custom-filter”).toggle();
e.preventDefault();
});
});
jQuery(“#moreoption”).button().toggle(function() {
jQuery(this).button(‘option’, ‘label’, ‘Stop’);
}, function() {
jQuery(this).button(‘option’, ‘label’, ‘Start’);
});
</script>

Advertisements

Tagged:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: