CODEWITHSUNDEEP
jquery
Jeroenttje
Jeroenttje

Reputation: 89

Toggle Slide and Hide

Searhed a bit and couldn't find it.

I'm sitting with a issue here. on http://cmctest.netserver11.net, i have 6 images wich has a toggle jquery function. Problem is, that when i, toggle twice, the other one dissapears. I tried the jquery hide function but it was regardless.

Only thing i need for this is, when you toggle the second, the first one will collapse.

jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
    {
jQuery(this).next(".content").slideToggle(500);
    });
});

Would be awesome if you could help! Thanx

Upvotes: 1

Views: 811

Answers (1)

balexandre
balexandre

Reputation: 75113

You just need to hide all before slide down

jQuery(document).ready(function() {
    jQuery(".content").hide(); // hide all

    //toggle the componenet with class msg_body
    jQuery(".heading img").click(function()
    {
        jQuery(".content").slideUp(500); // slide all up
        jQuery(this).next(".content").slideDown(500);
    });
});

There is no need to use slideToggle() for what you want to acomplish, don't "ask" the user to click again to hide the text...

by the way... you should use a <ul> instead a bunch of <div>'s for your markup, something like:

<ul id="content">
    <li class="item">
       <img src="/images/minified/closedcolored.png" alt="" />
       <div class="description">
          <h2>Acquisitie</h2>
          <p>Hoe scherp bent u als het gaat om het werven en houden van klanten?</p>
       </div>
    </li>
    ...
</ul>

then you can easily do:

jQuery(document).ready(function() {
    jQuery(".description").hide(); // hide all

    //toggle the componenet with class msg_body
    jQuery(".item img").click(function()
    {
        jQuery(".description").slideUp(500); // slide all up
        jQuery(this).next().slideDown(500);
    });
});

I just forgot one little detail!

inside the click method, replace what you have with:

jQuery(".description").slideUp(500); // slide all up
if(!jQuery(this).next().is(":visible")) // is visible already?
    jQuery(this).next().slideDown(500); // slide down

Upvotes: 2

Related Questions