Papermashup

Subscribe


Tweets


"Thanks @KBedders @bethgordon @twitteruk for #BrandingMe! http://t.co/NNA2ke8NHc"

@ashleyford 8 hours ago

"Haven't been to @StarbucksUK in a while, was surprised in how my Bacon and egg crepe looked... #notlikethepicture :) http://t.co/blnr3I6d8V"

@ashleyford 8 hours ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

jQuery Show / Hide Plugin

A plugin to show and hide content using jQuery

AshleyAshley

Due to popular demand here’s a re-written version of the tutorial I wrote over a year ago on how to show and hide content using jQuery. After I first published the post I’ve had a lot of requests as to how you can show and hide multiple divs so I’ve written this plugin which does all the work for you!

The Plugin


(function ($) {
$.fn.showHide = function (options) {

//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'

};
var options = $.extend(defaults, options);

$(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});

return false;

});

};
})(jQuery);

The Usage

Here we setup the options for the plugin. you can set the speed of the toggle, if you include the jQuery UI plugin you can specify an easing effect. Also there’s an option to change the text for the button. 1 is change 0 is dont change. and the final options are the show and hide text.



$(document).ready(function(){

$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 1, // if you dont want the button text to change, set this to 0
showText: 'View',// the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open

});

});

The HTML

Here you can see the simple usage for the plugin. We’ve already set the plugin options above in our DOM ready function now here we set our divs up. for element you want to toggle, you just need to add the div id to the rel attribute of the a tag as shown below. You can now add as many show hide divs as you want to.

If you want all the open divs to close when you click to open another simply add the class .toggleDiv to each element.

<a class="show_hide" href="#" rel="#slidingDiv">View</a></pre>
<div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>
<pre>
<a class="show_hide" href="#" rel="#slidingDiv_2">View</a></pre>
<div id="slidingDiv_2" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>
<pre>

download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 164
  • jenn
    Posted on

    jenn jenn

    Reply Author

    Is there a way to hide one div once the other one is opened?


  • Luke McLachlan
    Posted on

    Luke McLachlan Luke McLachlan

    Reply Author

    ok so ignore my question. i manage to get an image showing by editing the showHide.js file :

    if(options.changeText==1){

    $(toggleDiv).is(“:visible”) ? toggleClick.html(options.hideText) : toggleClick.html(options.showText);

    all done.


  • Luke McLachlan
    Posted on

    Luke McLachlan Luke McLachlan

    Reply Author

    thank you for this. I wonder though, is it possible to show an image in showText and hideText? I’ve been trying to do this but only the image reference is showing? thanks


  • Jjdai Jjdaidai
    Posted on

    Jjdai Jjdaidai Jjdai Jjdaidai

    Reply Author

    Bonjour
    I have 2 or more groups of div, and i want that the wole group 1 is closed but not the others.
    So I have add a little modif do close a group of div

    1- in the plugin i add the code between “//JJD begin modif” and “//JJD end modif” :
    ///////////////////////////////////////////////////
    // ShowHide plugin
    // Author: Ashley Ford – http://papermashup.com
    // Demo: Tutorial – http://papermashup.com/jquery-show-hide-plugin
    // Built: 19th August 2011
    ///////////////////////////////////////////////////

    (function ($) {
    $.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
    speed: 1000,
    easing: ”,
    changeText: 0,
    showText: ‘Show’,
    hideText: ‘Hide’

    };
    var options = $.extend(defaults, options);

    $(this).click(function () {

    $(‘.toggleDiv’).slideUp(options.speed, options.easing);
    // this var stores which button you’ve clicked
    var toggleClick = $(this);
    // this reads the rel attribute of the button to determine which div id to toggle
    var toggleDiv = $(this).attr(‘rel’);

    //JJD begin modif —————————————-
    //for hide groupe of div wz test id we are opening
    if(!$(toggleDiv).is(“:visible”))
    {
    var h = toggleDiv.indexOf(“-“); //search the root or id
    var group = “.” + toggleDiv.substring(1,h); //build the clas name
    $(group).slideUp(options.speed, options.easing); //close all the div whith the class name group
    }
    //JJD end modif —————————————-

    // here we toggle show/hide the correct div at the right speed and using which easing effect
    $(toggleDiv).slideToggle(options.speed, options.easing, function() {
    // this only fires once the animation is completed
    if(options.changeText==1){
    $(toggleDiv).is(“:visible”) ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
    }
    });

    return false;

    });

    };
    })(jQuery);

    2 – the attribut is building with many Id. Tthat is a string ===> root + “-” + id:
    exemple
    rel=”#colediteur-1>”>
    rel=”#colediteur-2>”>
    rel=”#colediteur-3>”>
    and
    rel=”#seealso-1>”>
    rel=”#seealso-2>”>
    rel=”#seealso-3>”>

    3 – I add a class in the div with the root of my id

    ” class=”colediteur”>
    ” class=”colediteur”>

    ” class=”seealso”>
    ” class=”seealso”>

    In this exemple the root of the first group is “colediteur” and the second “seealso”

    This run nice, each item of one group is closed when i open an item of one.
    If i close a “colediteur” only the groupe of div “colediteur” is closed.

    Sorry for my badly english and thanks for this pluggin
    JJDai


  • Rato Mirconi
    Posted on

    Rato Mirconi Rato Mirconi

    Reply Author

    Thank you for sharing!

    Is it possible use a box (as a div) where you can click to show/hide rather than the text “Show” “Hide”?


  • Mardi
    Posted on

    Mardi Mardi

    Reply Author

    Thank you for the tutorial!
    Question, when I load the page my divs are already open. How do I fix this?

    Also if I wanted each link/button to say something different when they are opened and closed how would I do this?
    E.g I need one link to say downstairs + when closed and downstairs – when opened. The I need another div to say upstairs + when closed and upstairs – when opened.


  • bala
    Posted on

    bala bala

    Reply Author

    Hi friend, plz could you give me idea, how to move horizontal.

    Thanks,


  • susan neil
    Posted on

    susan neil susan neil

    Reply Author

    Hi, thanks for the plugin. I wanted to use the method to display the content on a text heavy site. But the content needs to be searchable. Am wondering whether the “hidden” content will be hidden from the search engine? Many thanks.


  • Denver
    Posted on

    Denver Denver

    Reply Author

    Hi,

    Thanks this is nice and simple.

    Here is a version that both changes the show/hide buttons even if you don’t click on them (based on them having the “show_hide” class set. It also solves the issue where the div shows again when you try to hide it.

    (function ($) {
    $.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
    speed: 10,
    changeText: 0,
    showText: ‘Show’,
    hideText: ‘Hide’

    };
    var options = $.extend(defaults, options);

    $(this).click(function () {
    // this var stores which button you’ve clicked
    var toggleClick = $(this);
    // this reads the rel attribute of the button to determine which div id to toggle
    var toggleDiv = $(this).attr(‘rel’);
    // optionally add the class .toggleDiv to each div you want to automatically close

    if ($(toggleDiv).is(‘:visible’)) {
    //do nothing
    } else {
    $(‘.toggleDiv’).slideUp(options.speed, options.easing, function () {
    // this only fires once the animation is completed
    if (options.changeText == 1) {
    $(‘.show_hide’).text(options.showText);
    }
    });
    }

    // here we toggle show/hide the correct div at the right speed and using which easing effect
    $(toggleDiv).slideToggle(options.speed, options.easing, function () {
    // this only fires once the animation is completed
    if (options.changeText == 1) {
    $(toggleDiv).is(“:visible”) ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
    }
    });

    return false;

    });

    };
    })(jQuery);


  • Chris Maxwell
    Posted on

    Chris Maxwell Chris Maxwell

    Reply Author

    Using rel=”#slidingDiv” in your markup will cause the following validation error:

    “Bad value #slidingDiv for attribute rel on element a: The string #slidingdiv is not a registered keyword or absolute URL.”

    http://validator.w3.org/

    An alternative is to use data-link=”#slidingDiv”.

    In the script change:

    var toggleDiv = $(this).attr(‘rel’);

    To this:

    var toggleDiv = $(this).attr(‘data-link’);


  • Tyler Slijboom
    Posted on

    Tyler Slijboom Tyler Slijboom

    Reply Author

    Works very well. Thank you.


  • Rus
    Posted on

    Rus Rus

    Reply Author

    Thanks for the tutorial. Works great in Chrome but not in IE8. The divs do not display as they should. Does anyone know why this could be or has a fix to this?


    • Rus
      Posted on

      Rus Rus

      Reply Author

      Found a fix. It seems IE does not like the , (comma) before closing curly brace. See the example below. I removed the comma after easing: ”

      $(document).ready(function(){
      $(‘.show_hide’).showHide({
      speed: 400, // speed you want the toggle to happen
      easing: ” // the animation effect you want
      });
      });


  • Patrick
    Posted on

    Patrick Patrick

    Reply Author

    Hey! How do I get these to stay collapsed on load? They are all open when the page loads


  • skumar
    Posted on

    skumar skumar

    Reply Author

    nice effect


  • Eliezer
    Posted on

    Eliezer Eliezer

    Reply Author

    I’m trying to replace the add and hide text with images, but It won’t work. How can this be done?


  • Bryan
    Posted on

    Bryan Bryan

    Reply Author

    The code works really well, it’s exactly what I wanted for my website, and I appreciate the help since I don’t know Javascript coding yet. The only problem I’m running into is browser issues. It works in safari, google chrome and even android OS but when I use it in internet explorer or mozilla firefox the div doesn’t expand when you click ‘view’. Is there a piece of code that I’m missing?


  • Louis
    Posted on

    Louis Louis

    Reply Author

    Where do I put the code from the section ‘The Usage’?
    In the qs file or somewhere in the website?

    Sorry, no experience with adding JQueries at all…

    Thanks!


    • Louis
      Posted on

      Louis Louis

      Reply Author

      Please ignore my previous message.

      I have added the js file and the code to a wordpress page, however I can’t get the script working. Can someone please help me out?

      Thanks!


  • a
    Posted on

    a a

    Reply Author

    how can i make it to work panel1.clientid


    • a
      Posted on

      a a

      Reply Author

      and with a specific link on page like you do


  • David
    Posted on

    David David

    Reply Author

    Thanks for making this script available. You saved me a lot of time! Any easy way to make this work on mouseover instead of click?

    Thanks again!


  • tom
    Posted on

    tom tom

    Reply Author

    Hi, do you know how to make this run horizontal instead of vertical?

    Thanks!


  • Ollie Barker
    Posted on

    Ollie Barker Ollie Barker

    Reply Author

    I’ve been trying to implement this on my site for a couple of days now but I still have the problem that when a div is opened, I can switch between divs without problem but i can’t close all the divs. It just bounces back.

    I’ve read through the comments several times but none of the fixes have worked. Could somebody please post the full javascript file so I know I’m not making any mistakes?

    Any help appreciated :)


    • Patti
      Posted on

      Patti Patti

      Reply Author

      having the same problem Ollie. If you figure it out, please post here. I will do the same. :-)

      Patti


    • Steph
      Posted on

      Steph Steph

      Reply Author

      line 17, replace:
      $(‘.toggleDiv’).slideUp(options.speed, options.easing);

      by:
      $(‘.toggleDiv:hidden’).slideUp(options.speed, options.easing);

      Thank’s to Mikael for the fix.


  • Adrian
    Posted on

    Adrian Adrian

    Reply Author

    Instead of a link to activate show/hide I have two check boxes, yes/no. When the user selects yes it activates (and works) but the tick is missing in the checkbox

    Any ideas?


  • Jackeline
    Posted on

    Jackeline Jackeline

    Reply Author

    Hi there, thanks so much for the plugin, it helped me a lot!
    I have a question, is there a way to substitute the ‘hide / close’ texts for images?


  • John
    Posted on

    John John

    Reply Author

    When I hide the div in IE7 he doesn’t close immediately and stays in the background behind the content that is below. Is there a fix to this?


  • David Ransier
    Posted on

    David Ransier David Ransier

    Reply Author

    Very cool code, and perfect timing for me. I’m working on a project that this code is perfect for and in a couple of weeks I start a new term at Clark College with a JavaScript and JQuery class. So, making this work is great practice for the coming class.

    However, it’s giving me problems that I’m unable to resolve.

    Ideally what I want is to toggle the display of a Div with the added feature that when I display a new Div the previously open Div closes without having to hit the Hide button.

    The first problem I ran into is similar to the issue that Derek talks about — immediately reopening when clicking Hide. If I click on a new Div, the previous one closes and the new one opens. Great! However, the label doesn’t change from Hide to View. If I open each Div, one after another, there will only be one Div open and all of the labels say Hide. Also, if I click on Hide for an opne Div, it opens again immediately after closing.

    If I try Mikael’s suggestion and change the line to:
    $(‘.toggleDiv:hidden’).slideUp(options.speed, options.easing);
    It no longer auto-opens, but now I will have multiple Divs open. So that fix breaks the ony-one-Div-at-a-time goal.

    I next tried another Mikael suggestion and removed the previous fix and added this line:
    $(toggleDiv).is(':visible') ? $('.toggleDiv').slideUp(options.speed, options.easing) :
    Now only one Div is open at a time, and it no longer auto-opens, but the label is stuck on Hide.

    Any thoughts on how to fix the label issue without breaking the other features?

    Here is the current version of my code:

    $(this).click(function () {	
    	// optionally add the class .toggleDiv to each div you want to automatically close
    	$('.toggleDiv').slideUp(options.speed, options.easing);
    	//$('.toggleDiv:hidden').slideUp(options.speed, options.easing);	
    	
    	// this var stores which button you've clicked
    	var toggleClick = $(this);
    	
    	// this reads the rel attribute of the button to determine which div id to toggle
    	var toggleDiv = $(this).attr('rel');
    	
    	// here we toggle show/hide the correct div at the right speed and using which easing effect
    	$(toggleDiv).is(':visible') ? $('.toggleDiv').slideUp(options.speed, options.easing) : 
    	$(toggleDiv).slideToggle(options.speed, options.easing, function() {
    	
    	// this only fires once the animation is completed
    	if(options.changeText==1){
    	$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
    	}
    });
    
    

    • Borges
      Posted on

      Borges Borges

      Reply Author

      How did you manage to stop it from re-opening again, when set to class .toggleDiv? I am not using the Show/Hide text, I just want the toggleDiv to work without re-opening.

      Tried your code above and it does not work for me.

      Cheers,


    • hans
      Posted on

      hans hans

      Reply Author

      yeah for me the same. would be cool if you could fix that. i tried already everything i can, but i’m not so good at jquery :( thanks for this code!


    • hans
      Posted on

      hans hans

      Reply Author

      here i found something. was useful to me cause it does what you were looking for! http://jsfiddle.net/sXqnD/15/


    • Charles Easton
      Posted on

      Charles Easton Charles Easton

      Reply Author

      Thanks for this revision. I don’t use the label changing option so the above fix works perfectly for me.


  • Derek
    Posted on

    Derek Derek

    Reply Author

    Hi… thanks for a very useful piece of code!

    One problem I am experiencing (using the setup as described in your article) is that a closed div displays just fine the first time, but thereafter when I click the link it closes and immediately reopens. Any ideas as to what could cause that?


    • Aldo
      Posted on

      Aldo Aldo

      Reply Author

      It looks like you have to comment this line.
      ‘$(‘.toggleDiv’).slideUp(options.speed, options.easing);’
      If you dont do that, everytime you close the div, it reopens.


  • Nicole
    Posted on

    Nicole Nicole

    Reply Author

    Hello!! Is there a modification in the code to make the animation from left to right and no up/down?

    Thank u so much!!!


  • Stefan
    Posted on

    Stefan Stefan

    Reply Author

    Hi there, really awesome work! Just what I’ve been looking for today. The example with show/hide works great for me but I’d be also interested in getting the multiple div hide/ toggle function to work. Do I just replace the lines that you posted today in the showHide.js and then alter the classes in the html doc?


    • mikael
      Posted on

      mikael mikael

      Reply Author

      Hi,

      for it to work, i added a class .toggleDiv to all of the div I want to show and hide.

      with the code I customized, you’ll only have one div shown at a time and if you click again on your “show/hide” link when the div is already opened, the script will close the div.

      hope it helps

      Mikael


  • mikael
    Posted on

    mikael mikael

    Reply Author

    Here is the trick:

            $(this).click(function () {	
    			 // optionally add the class .toggleDiv to each div you want to automatically close
                 $('.toggleDiv').slideUp(options.speed, options.easing);	
    			 // this var stores which button you've clicked
                 var toggleClick = $(this);
    		     // this reads the rel attribute of the button to determine which div id to toggle
    		     var toggleDiv = $(this).attr('rel');
    		     // here we toggle show/hide the correct div at the right speed and using which easing effect
    		     $(toggleDiv).is(":visible") ? $('.toggleDiv').slideUp(options.speed, options.easing) : $(toggleDiv).slideToggle(options.speed, options.easing, function() {
    		     // this only fires once the animation is completed
    			 if(options.changeText==1){
    		     $(toggleDiv).is(":visible") ? toggleClick.html(options.hideText) : toggleClick.text(options.showText);
    			 }
                  });
    
    

  • mikael
    Posted on

    mikael mikael

    Reply Author

    oops..

    it still doesn’t work…..

    any thoughts?


  • mikael
    Posted on

    mikael mikael

    Reply Author

    Hi
    thanks for the plugging.

    I’ve corrected the line that close the other div when clicking, it didn’t work well since if you click twice on your link, the second time will hide than show…

    here is my modification:

    $(‘.toggleDiv:hidden’).slideUp(options.speed, options.easing);

    best

    mikael


  • Roy D
    Posted on

    Roy D Roy D

    Reply Author

    Here is another version that works more like a carousel
    [ecko_code_highlight][/ecko_code_highlight]

    (function ($)
    {
    $.fn.showHide = function (options)
    {
    //default vars for the plugin
    var defaults =
    {
    speed: 1000,
    easing: ”,
    changeText: 0,
    showText: ‘View’,
    hideText: ‘Hide’
    };

    var options = $.extend(defaults, options);
    $(this).click(function ()
    {
    // optionally add the class .toggleDiv to each div you want to automatically close
    $(‘.toggleDiv’).slideUp(options.speed, options.easing );
    $(‘.show_hide’).text( options.showText );

    // this var stores which button you’ve clicked
    var toggleClick = $(this);

    // this reads the rel attribute of the button to determine which div id to toggle
    var toggleDiv = $(this).attr(‘rel’);

    // here we toggle show/hide the correct div at the right speed and using which easing effect
    if( $(toggleDiv).is(“:visible”))
    {
    $(toggleDiv).slideUp( options.speed, options.easing);
    if(options.changeText == 1)
    {
    toggleClick.text(options.showText);
    }
    }
    else
    {
    $(toggleDiv).slideDown( options.speed, options.easing );
    if(options.changeText == 1)
    {
    toggleClick.text(options.hideText);
    }
    }

    return false;
    });
    };
    })(jQuery);

    //var $k = jQuery.noConflict();
    $(document).ready(function()
    {
    $(‘.show_hide’).showHide(
    {
    speed: 1000, // speed you want the toggle to happen
    easing: ”, // the animation effect you want. Remove this line if you dont want an effect and if you haven’t included jQuery UI
    changeText: 1, // if you dont want the button text to change, set this to 0
    showText: ‘View’,// the button text to show when a div is closed
    hideText: ‘Close’ // the button text to show when a div is open
    });
    });

    .toggleDiv
    {
    height: 300px;
    background-color: #99CCFF;
    padding: 20px;
    margin-top: 10px;
    border-bottom: 5px solid #3399FF;
    }

    View
    Fill this space with really interesting content.

    View
    Fill this space with really interesting content.

    [ecko_code_highlight]


  • Roy D
    Posted on

    Roy D Roy D

    Reply Author

    Here is another version that works more like a carousel
    [ecko_code_highlight][/ecko_code_highlight]

    (function ($)
    {
    $.fn.showHide = function (options)
    {
    //default vars for the plugin
    var defaults =
    {
    speed: 1000,
    easing: ”,
    changeText: 0,
    showText: ‘View’,
    hideText: ‘Hide’
    };

    var options = $.extend(defaults, options);
    $(this).click(function ()
    {
    // optionally add the class .toggleDiv to each div you want to automatically close
    $(‘.toggleDiv’).slideUp(options.speed, options.easing );
    $(‘.show_hide’).text( options.showText );

    // this var stores which button you’ve clicked
    var toggleClick = $(this);

    // this reads the rel attribute of the button to determine which div id to toggle
    var toggleDiv = $(this).attr(‘rel’);

    // here we toggle show/hide the correct div at the right speed and using which easing effect
    if( $(toggleDiv).is(“:visible”))
    {
    $(toggleDiv).slideUp( options.speed, options.easing);
    if(options.changeText == 1)
    {
    toggleClick.text(options.showText);
    }
    }
    else
    {
    $(toggleDiv).slideDown( options.speed, options.easing );
    if(options.changeText == 1)
    {
    toggleClick.text(options.hideText);
    }
    }

    return false;
    });
    };
    })(jQuery);

    //var $k = jQuery.noConflict();
    $(document).ready(function()
    {
    $(‘.show_hide’).showHide(
    {
    speed: 1000, // speed you want the toggle to happen
    easing: ”, // the animation effect you want. Remove this line if you dont want an effect and if you haven’t included jQuery UI
    changeText: 1, // if you dont want the button text to change, set this to 0
    showText: ‘View’,// the button text to show when a div is closed
    hideText: ‘Close’ // the button text to show when a div is open
    });
    });

    .toggleDiv
    {
    height: 300px;
    background-color: #99CCFF;
    padding: 20px;
    margin-top: 10px;
    border-bottom: 5px solid #3399FF;
    }

    View
    Fill this space with really interesting content.

    View
    Fill this space with really interesting content.

    [ecko_code_highlight]


  • nickkos
    Posted on

    nickkos nickkos

    Reply Author

    Im trying to make this unload any other divs before displaying the new one any way to do that??


  • gregg
    Posted on

    gregg gregg

    Reply Author

    Please Help! I need a reply in the next 24hours, Is it possible to close one div if it is already open as another opens, Please Reply! I’m new to js! Gregg


  • Jason
    Posted on

    Jason Jason

    Reply Author

    Great Tutorial.

    Is it possible to have the div half way open?
    When click on VIEW, it just slides the other half up.

    Thanks for the help in advance.


  • Fuji
    Posted on

    Fuji Fuji

    Reply Author

    Hi Dave am trying to display an image instead of text but doesnt seems to be working. I have set text to html in my js
    $(toggleDiv).is(“:visible”) ? toggleClick.html(options.hideText) : toggleClick.html(options.showText);

    and in my html i have this
    showText: ”,
    hideText: ‘Hide Content’

    but this is not working can you explain


  • Vlad
    Posted on

    Vlad Vlad

    Reply Author

    Thank you very much for this plugin!


  • Dan
    Posted on

    Dan Dan

    Reply Author

    Thanks for the code!
    I have got it working so that a div with a background image replaces the ‘show’ button and then when you click it the box appears and the div changes to the text ‘hide’. However when i click hide the box goes away but insead of the div appearing again the ‘hide’ text changes the ‘show’.

    Anyone know how i would get the ‘show’ to change back to the div with the background image????

    Cheers!


  • Steve Thompson
    Posted on

    Steve Thompson Steve Thompson

    Reply Author

    Great script! I am having trouble though with compatibility. It works fine with Chrome 18 and FireFox 12, but Internet Explorer 9 is giving me hell. The only other quirk is that if you try and click on the “View More” too quickly after the page loads it disappears when you click on it.

    http://www.tradingsolutions.com/products/wavsd.html

    Any help would be much appreciated.


  • Maxime
    Posted on

    Maxime Maxime

    Reply Author

    Hey,
    Is it possible to show/hide several div’s simultaneously with the same click ?
    I tried to write 2 elements in rel=””, but it doesn’t work…
    Thanks!
    Maxime


  • David
    Posted on

    David David

    Reply Author

    Hey,
    if you want to use an image instead of Text, this code will work:

    $(toggleDiv).is(“:visible”) ? toggleClick.html(options.hideText) : toggleClick.html(options.showText);

    in the options just set “hideText” and “showText” to the img tag.

    Dave


    • Rick
      Posted on

      Rick Rick

      Reply Author

      Hi David,

      Can you give an example code how to use image (icon) instead of text.

      Thanks
      Rick


  • Donovan Rittenbach
    Posted on

    Donovan Rittenbach Donovan Rittenbach

    Reply Author

    Thanks Dave for pointing out the solution to me on April 30, 2012 at 3:52 am
    It worked perfectly with one minor tweak. The type of quote in your solution was the incorrect quote, at least when I copied and pasted it. Provided a posting parser isn’t going to change it, this is what ultimately worked for me. i’ve included a little extra to provide context in the code:

    $(this).click(function () {
    var toggleDiv = $(this).attr(‘rel’);
    $(‘.toggleDiv’).not(toggleDiv).slideUp(options.speed, options.easing);
    // this var stores which button you’ve clicked
    var toggleClick = $(this);

    thanks again for the help.


  • Stefan
    Posted on

    Stefan Stefan

    Reply Author

    Hello,

    this is a nice script, thanks for that!
    Gives a addon who its only one div open (show)?

    I find better when i have one div open and click a other div so must be clos the first div automatical and open tha the new div…

    Regards, Stefan


  • Gino
    Posted on

    Gino Gino

    Reply Author

    Hi everyone, and thanks for an awesome script Ashley!

    I’m not sure if anyone else has had problems making the div boxes default to the “hide” position when the page loads, but i found a solution for this.

    Add style=”display:none;” inside the div brackets of the ones you want hidden by default.


  • Emiliano
    Posted on

    Emiliano Emiliano

    Reply Author

    Great plugin, but you need to move ‘toggleDiv’ before click function.
    Otherwise it keeps closing when you click.

    var options = $.extend(defaults, options);
    //Moved here to make it work
    $(‘.toggleDiv’).slideUp(options.speed, options.easing);
    $(this).click(function () {

    // this var stores which button you’ve clicked
    var toggleClick = $(this);

    Cheers, Emiliano


  • James
    Posted on

    James James

    Reply Author

    Hi,

    I have recently used this plugin and it seems to work great!

    I have just come across one issue which I can’t seem to resolve in that I would like the page to scroll automatically when you click on the show/hide link. At the moment in some cases the content disappears off the screen as it closes one box and opens another. I’m hoping there is a quick fix for this as I like the plugin and just need to get passed this last issue.

    I have read the posts previous but can’t seem to find anything to help!

    Many Thanks
    James


  • Dave
    Posted on

    Dave Dave

    Reply Author

    Hey guys,

    Dave again (from earlier in the comments!). I have come across an issue and I would be most grateful if Ashley (or anyone else) knows how to fix it. I’m using it for a menu, when you click on a menu option the sub elements slide open. This works fine apart from when the suboption text spans over 2 lines without a manual line break. It always seems to assume each entry is only 1 line high so it means the div expands to the height it would be if each suboption was one line then jumps the rest of the way. So if i have:

    Option 1
    Option 2
    Option 3

    Then it works fine, however if i have

    Option 1
    Option 2 with some long text which automatically
    breaks to the next line like this
    Option 3

    Then it will slide down to the bottom of the 2nd line of option 2 and then jump to the bottom of option 3. If i add a manual line break in the middle of option 2 then it solves the problem as it can then work out how many lines there are. It’s obviously an age old problem working out how many lines text automatically spans over and i cannot for the life of me work out how to stop this from happening without manually adding line breaks which isn’t suitable as it’s a dynamic menu which changes based on user input?

    I would massively appreciate any pointers anyone can give, even if it’s just an idea that I can look into further, I will of course post any findings on here for everyone else to use as well.

    Thanks everyone and thanks for the plugin Ashley!

    Dave


  • Omahr
    Posted on

    Omahr Omahr

    Reply Author

    Please help. The parent toggle doesn’t resize… how can i fix it?
    thanks in advance.


  • Chris Byrne
    Posted on

    Chris Byrne Chris Byrne

    Reply Author

    Love this – absolutely fantastic plugin and just what I was looking for. However, I’ve used the ‘toggleDiv’ class, but I can’t seem to work out how to turn off a div after it’s been clicked. i.e. when I click on a picture, it shows the div as expected, but I then can’t get it back to its default hidden state.

    I’d very much appreciate a reply. Thanks for all the good work!


    • David
      Posted on

      David David

      Reply Author

      I have the same problem as you…


    • Donovan Rittenbach
      Posted on

      Donovan Rittenbach Donovan Rittenbach

      Reply Author

      Me too…the div starts with style=”display:none;” then you toggle it and it blinks closed then open.


    • David
      Posted on

      David David

      Reply Author

      hey Donovan look down i posted what you have to do so it works.

      do a search in this site ( ctrl + f )
      for:
      April 30, 2012 at 3:52 am or for David

      and you’ll find what you have to do. 😉

      hope it helps


  • Edgar
    Posted on

    Edgar Edgar

    Reply Author

    Any help on how to add other animation effects to this excellente plugin??


  • Julia Barry
    Posted on

    Julia Barry Julia Barry

    Reply Author

    Awesome plugin!

    I’m wondering if there’s a way to make the “Show” text instead be whatever the linked text on that item is?

    I can have the link text say something like “Documentaries” at first, but then once you click on it, the word goes back to “Show” and “Hide.”

    I’m trying to use this with categories that organize content, so the names of the categories can’t change to “Show” once you’ve clicked.

    Hope this makes sense.

    Thanks!


  • Sebastien
    Posted on

    Sebastien Sebastien

    Reply Author

    Hi everyone,

    First, thanks for this plugin, it is very useful!

    My issue is that the parent divs do not resize properly when the toggled on then off again (tested in all major browsers). I am using joomla and a template (I posted the issue on their support forum but, even though they are still investigating it actively, they think it might be a more generic bug). Debugging using firebug show this as well, but I am not sure why the code, as provided, does not handle these container/parent divs correctly.

    Steps to reproduce:

    1. add in the head the java script showHide.js (shown here)
    2. create a new article in joomla (in my case) with the following html code:

    Refereed Articles and Book Chapters

    2012
    <!—->
    a, b, c, “Title”, In journal, pp. 0-13, 2012.

    Sample text that will be replaced by a video player… Sample text that will be replaced by a video player… Sample text that will be replaced by a video player… Sample text that will be replaced by a video player…

    <!—->

    3. Go to the article URL

    Demo site with that issue : http://goo.gl/YCQbl

    4. Click on the Video Icon (at the right), which uses jquery:slideToggle().

    5. The template expands to show the text.

    6. Click again on the video Icon. The content div / black border resizes but the parent divs are not resized properly.

    Expected result: the parent divs are also resized to adapt to the new size (e.g. bigger when visible and smaller when hidden)
    Actual/wrong result : the parent divs do not resizes, so if I have many videos, the page ends up with a lot of blank spaces on the page, which has to be scrolled more inefficiently.

    Anyone have an idea on how to investigate this problem further to fix it ?

    Thanks a lot.


  • Heather
    Posted on

    Heather Heather

    Reply Author

    Thanks Ashley and thanks @Dizzy (Dec. 8, 2011) and the guys whose work he expanded on (@Dave and @Erik). I took Dizzy’s code, and substituted it for the equivalent function in the plugin (even though I’m quite at sea with jQuery and Javascript). No more bouncy divs! I have 5 showHide divs on the page and only want one open at a time. And I want it to be possible to close them all. Now when I click Close, it stays closed; it doesn’t bounce open again. (Haven’t tried IE7 but it’s working in IE6.)

    Another great example of internet collaboration with total strangers. Gotta love it.


  • Laura
    Posted on

    Laura Laura

    Reply Author

    Get code…I was able to create a page with multiple opening divs. I would like to see “Contract All | Expand All” feature to help indicate to a user that they will open as well as all divs would open or close at one time. Do you have any recommendations on how to code.
    Thanks in Advance


  • Phillip
    Posted on

    Phillip Phillip

    Reply Author

    Great script – i’ve read through the comments, and I’m still getting the ‘bouncy’ div when I use the .toggleDiv class to close other divs when i open a new one. When i try to close the open div, it closes, then opens up again.
    I’ve tried moving:
    var toggleDiv = $(this).attr(‘rel’);
    to the top of the function as suggested, but it doesn’t do anything.


  • Steve
    Posted on

    Steve Steve

    Reply Author

    How would one do something like this? Let’s say I have a lot of data to display, and I want to display some of it and and then have a “view all” link to toggle.

    I put my initial data into a div:

    ….

    And my full data into the other div:

    Using the toggleDiv class it works fine – except when I go from the full view and click on the “Hide” link – it doesn’t toggle the toggleDiv back to visible.


  • Rick
    Posted on

    Rick Rick

    Reply Author

    Adding to my previous commend – I should not be so lazy….

    I removed the display: none, to the div starts visible – just had to change the link text on the open div so it showed close” instead of “view” .

    The only downside is that all DIV’s are visible. I assume that just adding more styles for each div would fix this.

    Again, thanks.


  • Rick
    Posted on

    Rick Rick

    Reply Author

    Great tute. One question – how do I start with a div already open? For example, I have a full page slider on my site. The content is in a container div. I want people to be able to hide/unhide the container. Pressing hide – they only see the background slider.

    See what happens when you write a great free plugin? You spend hours on tech-support!
    Thanks


    • Richard
      Posted on

      Richard Richard

      Reply Author

      Hey Rick did you figure this out? I have the opposite problem…

      For whatever reason my divs are opened when the page loads and I would like them not to be, but can’t figure out how to change this.

      If you have the solution please share!


      • Ashley
        Posted on

        Ashley Ashley

        Author

        @Richard,

        You just need to set the CSS for the divs you’re showing and hiding to display:none;

        Ashley


  • Nate York
    Posted on

    Nate York Nate York

    Reply Author

    Greetings!

    This is perfect for what I have been looking for!

    And it works great, thanks Ashley, and forum for all the help.

    I am feeling a little dumb, as I cannot get the toggle to work at all.

    When I compare my code I just got yesterday from this site with what @Dave was talking about, mine looks different.
    ——————————————————-
    $(this).click(function () {
    // optionally add the class .toggleDiv to each div you want to automatically close
    $(‘.toggleDiv’).slideUp(options.speed, options.easing);
    // this var stores which button you’ve clicked
    var toggleClick = $(this);
    // this reads the rel attribute of the button to determine which div id to toggle
    var toggleDiv = $(this).attr(‘rel’);
    // here we toggle show/hide the correct div at the right speed and using which easing effect
    $(toggleDiv).slideToggle(options.speed, options.easing, function() {
    // this only fires once the animation is completed
    if(options.changeText==1){
    $(toggleDiv).is(“:visible”) ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
    }
    });

    return false;
    —————————————–

    Do I need to make any modifications? I have added the toggleDiv class to my elements.

    Any thoughts?

    Sorry, I know people have been talking this into the ground, I just cant seem to figure it out :)

    n~


  • Matt
    Posted on

    Matt Matt

    Reply Author

    Hi, Firstly thanks for this its a great piece of code.

    Is there anyway to make this validate under HTML5 it gives errors because your using an un registered “rel=”?

    Let me know, thanks


  • Rufus
    Posted on

    Rufus Rufus

    Reply Author

    Love this, works perfectly!

    I want it to slide from side to side instead of up and down, and have tried everything I can think of. I notice in the first show/hide tutorial someone asked the same thing and in that case it was a simple matter of changing height to width in the css, but that does not do the trick with this code.

    Any clues?


  • eric
    Posted on

    eric eric

    Reply Author

    I want to use images instead of text for the show / hide elements. How do I do this?


  • cruiser
    Posted on

    cruiser cruiser

    Reply Author

    Just found your site and find it very helpful. I want to use showHide.js in my page but I am unable to get it to work. In a div container I want to be able to have a list of links (div-left) and then on clicking the links I want to show a description with a picture in a separate div to the right of the link (div-right). Is this possible with showHide.js or should I be looking for another script? This is my first attempt at JQuery.


  • Mike
    Posted on

    Mike Mike

    Reply Author

    To make the link stay white, I would assume that you simply style it as such in the stylesheet that you are using:

    A:visited {color: #FFFFFF;}

    To have the divs expanded by default, remove the “display:none” property of the stylesheet.


  • tom
    Posted on

    tom tom

    Reply Author

    Ok, I am running into two small things.
    -the expand/ collapse link is turning purple. I think this is because I have “visited” it before, so my browser is making it purple. But I’d really like it to stay white, because it matches my theme. How can I do that?
    Click To Expand
    -also, how can I make the div by default be expanded, instead of collapsed? I’d like to do this so I can add a cookie for the user to keep it closed once they close it, but for new visitors to see the full menu.

    Thanks


  • tom
    Posted on

    tom tom

    Reply Author

    I really wish there was an edit button here..
    I think I got it to work, I just aborted using a preview image of the menu. thanks.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Tom. Good to see you got it fixed, any problems let me know!

      Ashley


  • tom
    Posted on

    tom tom

    Reply Author

    Ok I finally have something useful. Please disregard the last 2 comments.

    I got it to work, but…
    I’m not sure how to get it to do exactly what I want. Basically, I want this to work with my menu. I have two divs, one with a “preview image” of the menu, and the second one with the actual menu. When the page first loads, I want the preview image to be visible only. When I click the view/ toggle link, I want the image to “close”, and then after that happens, I want the second div to “open”. Then pressing it again would undo this process. How would I do that using this code?


  • tom
    Posted on

    tom tom

    Reply Author

    ok I finally got it working. I’m new, my mistake was I didn’t update the script location to be in my /script folder. Thanks so much!


  • tom
    Posted on

    tom tom

    Reply Author

    I’m trying to implement this, but I’m failing. Could you please make a “for dummies” edition?


  • Mike
    Posted on

    Mike Mike

    Reply Author

    Ashley,

    Nice script indeed – I’ve been using it in the FAQ section of my page to show/hide answers. I have a question, for you or anyone that may be able to help me. I’d like to update a database when someone clicks the link to VIEW the div – this DB would not be updated when CLOSE was clicked. The idea being, to keep track of the most popular FAQ entries and bring them to the top of the pile.

    I’ve taken a look at your “Delete and Update DB” script for ideas, but so far all I can manage is to update the DB on both VIEW and CLOSE, which will give me inaccurate results. Any help would be appreciated.


  • roger
    Posted on

    roger roger

    Reply Author

    having same issue as Katari. i am using lightbox to display a gallery, then adding link to a div that has a form in it. script works great outside of lighbox overlay but not inside, i get the link to show but just pops to top of lightbox overlay.. i am using header file to display page.


  • Wiinter
    Posted on

    Wiinter Wiinter

    Reply Author

    I’d be surprised if Ashley or the early responders/troubleshooters are still watching this open thread. BUT, I’ve a question for anyone who might know.

    And, and answer: this script works great with tables as well – I just apply the class to the , and have the showHide div surrounding content in one of the table cells. The table row grows/shrinks as the toggle. It’s awesome! I did use Dave’s mod, however. (see above exchange between Dave and Eric). And I don’t use togglable text labels.

    My question, though: when I use the class within the table, some hyperlinks refuse to keep their hit target on top. Meaning, if I click a link within one of the cells, the showHide function activates instead of the hyperlink target. If I right-click the link, however, and choose “open in new window”, it opens fine AND the showHide function doesn’t activate.


  • Aaron
    Posted on

    Aaron Aaron

    Reply Author

    I can’t seem to figure this out, maybe someone can help. So what I want to do is have the picture show by defualt, but then when the link is clicked, the picture will change to a div, so the picture hides, and the div appears. here is what it looks like
    =’$basenumber’ limit 8″);
    while($row = mysql_fetch_array($sql)){
    $imageid = $row[‘id’];
    $image2 = $row[‘link’];
    ?>
    <div id="apDiv” ><img src="” width=”300″/><div id="apDiv” style=”background-color:#999; height: 300px; width: 300; display:none” class=”toggleDiv” >
    <a href="#" class="show_hide" rel="#apDiv”>change
    ….
    maybe someone can help….please and thank you.


  • matt
    Posted on

    matt matt

    Reply Author

    Just an update, figured out why they were open by default.
    It was simply a comma that must have been inserted accidentally.
    Now its working just as I want.
    Thanks again


  • Mark Engelhardt
    Posted on

    Mark Engelhardt Mark Engelhardt

    Reply Author

    Matt,

    As far as starting with the divs closed, I believe Ashley’s demo page behaves the way you want… display:none; works for me.

    my div looks like this:

    Good luck!

    Mark


  • Jonas
    Posted on

    Jonas Jonas

    Reply Author

    @Ashley

    Great plugin, thanks!

    I have a problem though..
    When i click on a div to open it and i clicks on another div, it opens while the first one closes.. simultaneously. What i want is the first div to roll up and close, and THEN the new div that has been clicked on opens. What to do?


  • matt
    Posted on

    matt matt

    Reply Author

    First, thanks for this, its great.
    Maybe I missed it, but i want to have the content not display by default. I tried in the css for the div, setting: “display:none;”
    But it always shows the content on load… Am i missing something?
    Thanks in advance


  • Aaron
    Posted on

    Aaron Aaron

    Reply Author

    how do you make the div closed by default?


  • Travis
    Posted on

    Travis Travis

    Reply Author

    Is there a way to use this with tables/tr/td/ ? Thanks!


  • cecilia
    Posted on

    cecilia cecilia

    Reply Author

    I’m wondering the same thing as @Viktor, how do i make the content slide up instead of down?

    @Ashley thanks for a great script! People like you makes it possible for me to grow as a web designer, because i’m really not a great programmer.


  • Ann K
    Posted on

    Ann K Ann K

    Reply Author

    Hello,
    When i have 8 divs that i need to slide with all varying heights.
    When give the sliding div height: 100% there is a jerking motion on the slide effect.

    When the div has a specific height example height: 300px; then the motion is smooth.

    Is there a way to fix this or do i have to give all my divs a specific height?

    Thanks for any help!.
    -Ann K


  • Katari
    Posted on

    Katari Katari

    Reply Author

    Sorry about that html.


  • Katari
    Posted on

    Katari Katari

    Reply Author

    I’m trying to edit a page with tables (the redesign for the site is pending) to have a few hidden divs that appear when you click on the relative link, so this plugin seemed like exactly what I need.
    When I click on my links (changed from View), they just bounce me back to the top instead of opening the div.
    Here’s my html:

    Question

    Answer

    Question

    Answer

    (etc)


  • Amanda
    Posted on

    Amanda Amanda

    Reply Author

    Fixed my problem – this works: $(toggleDiv).is(“:visible”) ? toggleClick.text(options.hideText).css(‘background-image’, ‘url(/images/image1.gif)’) : toggleClick.text(options.showText).css(‘background-image’, ‘url(/images/image2.gif)’);


  • Amanda
    Posted on

    Amanda Amanda

    Reply Author

    Really liking the plugin – works more smoothly than some others that I have looked at. Trying to find a way to use CSS to change the appearance of the show/hide hyperlink once it’s clicked when class=”show_hide” is being used for the hyperlinks. Tried using:
    $(toggleDiv).is(“:visible”) ? toggleClick.text(options.hideText).css({ backgroundColor: ‘#399C05′ }) : toggleClick.text(options.showText).css({ backgroundColor: ‘#FFFFFF’ });
    That worked fine, but it broke when I tried using background: url(/images/image.jpg). Shows “Microsoft JScript runtime error: Object doesn’t support this property or method” and show/hide stops working. Any suggestions?


  • Dizzy
    Posted on

    Dizzy Dizzy

    Reply Author

    Thought I’d expand upon Dave’s suggestion by adding my own. This applies specifically to those who want a only one-at-a-time toggling method.

    I noticed if you wanted the text to change once a show/hide link is clicked, the current div wasn’t being reset to close as it was being slid up. To fix this, you can use the .not(toggleClick) Dave referenced to handle that. The resulting click function is:

    $(this).click(function () {
    // this var stores which button you’ve clicked
    var toggleClick = $(this);
    // this reads the rel attribute of the button to determine which div id to toggle
    var toggleDiv = $(this).attr(‘rel’);
    //slide up any divs that are not the one to be toggled
    $(‘.toggleDiv’).not(toggleDiv).slideUp(options.speed, options.easing);
    // here we toggle show/hide the correct div at the right speed and using which easing effect
    $(toggleDiv).slideToggle(options.speed, options.easing, function() {
    // this only fires once the animation is completed
    if(options.changeText == 1) {
    $(toggleDiv).is(“:visible”) ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
    //typically this will just set the text to the “show”
    //text since it’s not the div currently selected
    $(‘.show_hide’).not(toggleClick).is(“:visible”) ? $(‘.show_hide’).not(toggleClick).text(options.showText) : $(‘.show_hide’).not(toggleClick).text(options.hideText);
    }
    });

    return false;

    });

    I imagine this could easily be more generalized. I think you’d do it with the jquery .each() to loop over every ‘.show_hide’ class and then check if it’s relevent div is of the class toggleDiv using .hasClass(‘toggleDiv’), but I don’t really know squat about javascript so I couldn’t figure out the syntax. Anyway, hope this helps.


    • Joel Eade
      Posted on

      Joel Eade Joel Eade

      Reply Author

      Thanks @Dizzy. I’m a total noob at jQuery, and your fix for this plugin worked for my situation so you’ve saved me lots of time. Thanks! :)


  • Dave
    Posted on

    Dave Dave

    Reply Author

    @Ashley thanks very much, great plugin :) You might want to amend the code so it excludes the current div so it works off the shelf for other users? Cheers, Dave


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Dave will do, and thanks for the fix 😉


  • Dave
    Posted on

    Dave Dave

    Reply Author

    @Erik No worries, Ashley did all the hard work!! Cheers, Dave


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Dave @Erik great to see you guys got everything sorted. Glad you found the script helpful, and if you have any other problems just post them here.

      Best

      Ashley


  • Erik
    Posted on

    Erik Erik

    Reply Author

    Great! It’s working! Thank you very much Dave (and Ashley!)


  • Dave
    Posted on

    Dave Dave

    Reply Author

    @Erik You have to move the line that says:
    var toggleDiv = $(this).attr(‘rel’);
    to the top of the function (above the $(‘.toggleDiv’).not(currentDiv)….. line). I also mistyped the attribute name, so change currentDiv to toggleDiv and it should all work.

    Cheers!

    Dave


  • Erik
    Posted on

    Erik Erik

    Reply Author

    Dave, thank you very much for your reply, but I still haven’t got it working. I don’t have much/any javascript knowledge, so I’m not exactly sure what you mean with moving the var which stores the button information ON TOP OF THE var that = this rel attribute. I mean, isn’t it already on top of it (the line above?) This is what I got:

    $(this).click(function () {

    $(‘.toggleDiv’).not(currentDiv).slideUp(options.speed, options.easing);

    // this var stores which button you’ve clicked
    var toggleClick = $(this);

    // this reads the rel attribute of the button to determine which div id to toggle
    var toggleDiv = $(this).attr(‘rel’);

    Thanks in advance,


  • Dave
    Posted on

    Dave Dave

    Reply Author

    Hey everyone,

    For those of you having problems opening and closing a div (without clicking on another div) it’s because the script is currently set to close all divs with togglediv class (which will most likely include the current one). This means they are all closed and then the current one is toggled so it’s reopened. To fix this you just have to exclude the current div from the original close, so just move the var which stores the button you’ve clicked on to the top of the function (var toggleDiv = $(this).attr(‘rel’);) and then change this:
    $(‘.toggleDiv’).slideUp(options.speed, options.easing);
    to this:
    $(‘.toggleDiv’).not(currentDiv).slideUp(options.speed, options.easing);

    It should all be working now! Thanks so much for the great plugin Ashley!

    Dave


    • David
      Posted on

      David David

      Reply Author

      Thanks Dave i tried what you said at first it didnt work when you say:
      $(‘.toggleDiv’).not(currentDiv).slideUp(options.speed, options.easing);

      but

      i changed that line for this :
      $(‘.toggleDiv’).not(toggleDiv).slideUp(options.speed, options.easing);

      and now it works, my div can close without reopening!

      Great Job Ashley btw!


  • Erik
    Posted on

    Erik Erik

    Reply Author

    I also have the can-not-close bug (when you close the div, it automatically opens again). It’s only there when you use toggleDiv, because I didn’t had this bug at the beginning, when I had only 1 show/hide div,


  • Erik
    Posted on

    Erik Erik

    Reply Author

    Thanks for the script, it works great. But just wondering, could I also make the ShowText and HideText options show HTML? I tried changing toggleClick.text to toggleClick.html but it don’t seem to be that easy :)


  • Pranav
    Posted on

    Pranav Pranav

    Reply Author

    I am a javaquery newbie… Is there any way to change this plugin behavior a little bit?? What I want is when I click the second view button, the first sliding window should automatically get closed. What I am saying is basically I want only one expanded window at a time.


  • John
    Posted on

    John John

    Reply Author

    great script, works perfectly !
    @peter : set “changeText: 1″ to 0 at line 06 and edit html as :
    <a class="show_hide" href="#" rel="#slidingDiv"


  • Timur
    Posted on

    Timur Timur

    Reply Author

    Excellent Tutorial!


  • Christian
    Posted on

    Christian Christian

    Reply Author

    I suck at JavaScript and jQuery. I was able to get the one div show/hide plugin working but I have no idea about how to get this working. I have in my site directory before this code but I´m unable to get it working. I tried adding before the plugin and then closing it after the code but no. The plugin isn’t working. I´m using chrome. I have the CSS from the earlier plugin in use but all I get is two links that don’t work.


  • Warren
    Posted on

    Warren Warren

    Reply Author

    I have a section of a form in the div with extra fields to be filled out if expanded.
    How would I go about setting the values of any inputs to nothing when the div closes if someone has input any information in a form in the div?
    Thanks again for your time.


  • Viktor
    Posted on

    Viktor Viktor

    Reply Author

    Hey guys really nice script, but since I’m new to programing can someone tell me how to make it to slide up ? I want to make the button on the bottom and slide the content up.


  • SparkyJ
    Posted on

    SparkyJ SparkyJ

    Reply Author

    Ashley, Thanks for the new code. However, I’m seeing the divs closing now, when another is opened but the header link text still says “Close” after it “closes” and i too am having the springy divs that wont close. So what you end up with is a set of text links that have been opened and closed, and they all say “Close” and usually one is springy out of control.

    Seems to need some sort of reset. Any ideas why this is happening?


  • Warren
    Posted on

    Warren Warren

    Reply Author

    I see how I can add it to a radio button. How do I have it expand the div when the yes option of a set of radio buttons is clicked and closes the div when the no option is clicked?
    Thanks for this code.and your time
    Warren


  • Sandra
    Posted on

    Sandra Sandra

    Reply Author

    Works great – except in IE7! Augh!

    Any fixes for IE7?? HELP!!!


  • Vladorz
    Posted on

    Vladorz Vladorz

    Reply Author

    thank you so much! you saved my day! this is the best tutorial i could find on this subject, very well explained


  • Peter
    Posted on

    Peter Peter

    Reply Author

    Hello Ashley,
    Nice script!
    I would like to click on an image instead of text to open and close each div.
    How can I get the image to adopt the states of ‘show text’ and ‘hide text’….I want to remove ‘view’ & ‘close’ and just use the image…
    Hope that makes sense? : )
    Regards,
    Peter.


  • Francisco
    Posted on

    Francisco Francisco

    Reply Author

    @ Ashley,

    The previous div does close once a new one is opened, however, I cant seem to get the div to close again once they’ve been opened without clicking on another button to open a new one. The previous div does however close once a new one is opened.

    Any help would be appreciated.

    Many thanks.
    F


  • Jesse
    Posted on

    Jesse Jesse

    Reply Author

    Hey, thanks a bunch for this. Is it possible to add a bit to the code that makes the div slide closed when you click outside of it? Thanks!


  • Joe
    Posted on

    Joe Joe

    Reply Author

    @Ashley,

    I really just added the radio button to the mix because I wanted to test if all of these could hide/show content.

    The radio and checkbox do seem to show and hide perfectly, the checkbox just doesn’t show as checked when I do so.


  • Joe
    Posted on

    Joe Joe

    Reply Author

    @Ashley,

    Any thoughts of the checkbox showing as checked functionality?
    http://jsbin.com/ogaxic/3


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Joe, Are you looking to have multiple checkboxes that reveal different content? or radio buttons? a single radio button will never work as you have to have more than one. What are you looking to achieve?


  • Francisco
    Posted on

    Francisco Francisco

    Reply Author

    @ Ashley, you’re gonna hate me pal :)
    Now, when I open a div, it opens and closes the previous one except when I tried to close the currently opened div, it closes briefly and then suddenly opens up again. I’m gonna try to work this one out (hopefully) but if you have some time, perhaps this might be fixed.

    Great work. Many thanks for your help so far.
    :)


  • Francisco
    Posted on

    Francisco Francisco

    Reply Author

    @Ashley.
    WOW!!! Quick response too. Well done on this one Ashley. Most grateful.
    I tried it… and of course, undoubtedly, it works beautifully and smoothly. I’m sure everyone else after this would be immensely pleased as I am :D.

    Now it feels complete.

    Brilliant stuff.


  • Francisco
    Posted on

    Francisco Francisco

    Reply Author

    Hi Ashley, great script. Working like a charm so far but I’m still struggling to work out how to close a previously opened div when another one has been opened. I tried changing the divs to classes and naming them the same name but they all open at the same time now. Looks like magic but not what I want to achieve 😀

    Any help on this would be great. An example would be brill.

    Many thanks


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Francisco Thanks! I’ve just updating the code so you can optionally choose to close all the divs when another is selected. Simply add the class .toggleDiv to each element you want to close. :)


  • dee
    Posted on

    dee dee

    Reply Author

    @ashley,
    when we set all the divs to the same class, they dont toggle they show up all at the same time..

    its a pity – at first look this script looks great but after implementation its missing the one thing everyone here is asking for :(

    This doesnt work:

    Fill this space with credit card info

    Fill this space with 2nd div info

    Fill this space with 3rd div info


  • Chris
    Posted on

    Chris Chris

    Reply Author

    I am also trying to toggle divs so when one is open you click the next one the previous opened one closes and new one opens anyone have this working?


  • Kyle
    Posted on

    Kyle Kyle

    Reply Author

    Also having this issue:
    oe says:
    November 7, 2011 at 5:20 pm

    I currently have this on a checkbox but the checkbox doesn’t show as checked. Any ideas?

    http://jsbin.com/ogaxic/3

    How can I have the checkbox stay checked ?


  • Ripley Casdorph
    Posted on

    Ripley Casdorph Ripley Casdorph

    Reply Author

    Did anyone figure out how to get other div to close when you open a second one?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Ripley you should be able to do this by setting both divs with the same class so it toggles.


  • Joe
    Posted on

    Joe Joe

    Reply Author

    I currently have this on a checkbox but the checkbox doesn’t show as checked. Any ideas?

    http://jsbin.com/ogaxic/3


  • joe
    Posted on

    joe joe

    Reply Author

    This script works great. How hard would it be to also allow it to work with a checkbox or radio button instead fo a link?


  • Charaf
    Posted on

    Charaf Charaf

    Reply Author

    Hello,
    I’m trying to use this plugin to collapse a sidebar, but when the sidebar disappear the main content area doesn’t expand to fill space left by it!
    How can I do this?
    An another thing: how to change the animation effect? I did download jquery-ui.js and add it’s link to my html page, but when trying to use some “easing” like swing, it doesn’t work!
    May be these are a stupid questions, sorry! I’m totally new to JQuery/Javascript world (and hope you undrerstand my english)
    Thanks a lot.


  • David Radovanovic
    Posted on

    David Radovanovic David Radovanovic

    Reply Author

    RE: http://www.chefsconsortium.com

    Works great. Except that once clicked it opens then quickly closes… I was also wondering if anyone has placed all the html in a div container so that I could implement this CSS rule successfully:

    direction: ltr;
    height: 28px;
    position: fixed;top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;

    thanks!!


  • Andy
    Posted on

    Andy Andy

    Reply Author

    Well spotted Jeff. It’s working like a charm in IE6 now. Just about time, else i was about to go for another solution. Great plugin and works on all browsers now :)


  • Jeff
    Posted on

    Jeff Jeff

    Reply Author

    Line 10 of the plugin should not have the comma. This comma always makes IE tank. Remove it and the plugin should work just fine in IE.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Jeff you’re a genius. I’ll be sure to make this update to the code. Many thanks.

      Ashley


  • Andy
    Posted on

    Andy Andy

    Reply Author

    Hi Ashley,

    Even this doesn’t work on IE6. Are all your scripts not compatible with IE? Really liked this script, but really need to get it working for IE. Any suggestions to make it working for IE?

    Thnanks


  • Michael
    Posted on

    Michael Michael

    Reply Author

    Thanks for this, great script! Though unfortunately it is not working for IE7. Any fixes for this?
    Thanks!


  • Mark
    Posted on

    Mark Mark

    Reply Author

    I think on this site one can learn lot of things

    Thanks

    Mark


  • Chris
    Posted on

    Chris Chris

    Reply Author

    Hello, I have a few questions in regards –

    Once one anchor is clicked and active, and then the next anchor is clicked how can we have the previous active toggle div close instead of staying open.

    Also when replacing the text when the div is open is great but how to make it so when we click “close” on the active anchor it goes back to the default instead of switching it “show” text.

    Thanks in advance hope this is understandable and you may be able to help.


  • Kevin
    Posted on

    Kevin Kevin

    Reply Author

    How can I close the previous div when I go ahead and click on another link? Since I don’t want all of them to be expanded all at once.

    Thanks,

    Kev


  • Diego
    Posted on

    Diego Diego

    Reply Author

    Ashley, one question: There is any way to configurate this to show one div and hide the another ones, like a frame? Did you get it?
    Thanks for the plugin!


  • Devon Gilchrist
    Posted on

    Devon Gilchrist Devon Gilchrist

    Reply Author

    I’m echoing Matt… IE7 not working and would love to use this code. Thanks!


  • Simeon
    Posted on

    Simeon Simeon

    Reply Author

    Hello there! What about the xhtml rule that does not allow “div” nested in “a”?
    I am not so experienced so i just ask?
    Thank you.


  • Andy
    Posted on

    Andy Andy

    Reply Author

    oops, i tried creating css class instead of id earlier and it didn’t worked and tried again today and it worked. Probably bcos of caching issue. So it’s all great. Thanks for a great sript. I have added jquery pagination to it and it works like a charm. :)


  • Matt
    Posted on

    Matt Matt

    Reply Author

    Hi

    This doesn’t seem to work in IE7, I have tested your demo on IE7 and it doesn’t work, any ideas, as I really like this script.

    Cheers


  • Andy
    Posted on

    Andy Andy

    Reply Author

    Thanks for this plugin Ashley.

    View

    Fill this space with really interesting content.

    As per the code above, for each button and div, I need to add unique rel attribute and div id.

    As these buttons and div will be created on the fly (dynamically), it’s easy enough to set up a php script to generate these unique ids and echo it , instead of manually typing slidingDiv under rel and div id.

    But how do i add these IDs properties in css dynamically?

    In your css, you have #slidingDiv, #slidingDiv_2,#slidingDiv_3 but what if these ids are generated dynamically?


  • Sag-e-Attar Junaid Atari
    Posted on

    Sag-e-Attar Junaid Atari Sag-e-Attar Junaid Atari

    Reply Author

    Great, Thats what I was looking for. You rocked the jQuery.


  • Mia
    Posted on

    Mia Mia

    Reply Author

    Love it ! The easing effect is what makes this plugin rock over a few other plugins of its kind whereas : they simply either expand or drop down without any transitional effect .
    Great one Ashley :)

    BTW : Any plans on creating a WP Plugin out of this ? Would be sweet.

    Cheers :)