Jquery multiple show and hide - but hide others if one is shown

Question

Hello I've looked around and can't seem to find my exact problem.

What I have is multiple columns with a button of read more which when toggled slides down to show the hidden div with the extra content, the button then changes to close when its toggled on and once clicked hides the div again.

However I can't seem to make the next button close the previous div and open its own.

Here is my code:

$('#slidebtn-1').click(function() {
    $('#slidecontent-1').slideToggle(500);
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more');
    return false;
});
$('#slidebtn-2').click(function() {
    $('#slidecontent-2').slideToggle(500);
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more');
    return false;
});
}

html:

<div class="col">
    Content 
    <div id="slidecontent-1" class="hide">
        Hidden content goes here
    </div>
    <a id="slidebtn-1" class="more-btn" href="#slidecontent-1">Read more</a>
</div>
<div class="col">
    Content 
    <div id="slidecontent-2" class="hide">
        Hidden content goes here
    </div>
    <a id="slidebtn-2" class="more-btn" href="#slidecontent-2">Read more</a>
</div>

Any help would be greatly appreciated!

Cheers

score 2 · Accepted Answer · edited May 23 '17 at 12:27

I feel a bit lost when it comes to your question explanation vs. your code: did you mean you wanted to close "#slidecontent-1" when you click "#slidebtn-2" and vice versa?

If that's the case, @ofir-baruch 's comment is most proper: you likely want a generic function.

You could have each button add an attribute to its content area like slidDown: true or something, then whenever one of these buttons is clicked, have it slideToggle whatever div currently has slidDown: true, remove that attr from that div, add it to its own content div, and slideToggle its own div. Here's a link to a jsFiddle with an example:

http://jsfiddle.net/willbuck/NvXQt/1/

Credit to this for the jquery element equality test: How would you compare jQuery objects?

score 1 · Answer 2 · answered Feb 09 '12 at 15:10

I would strongly suggest using classes for both the hide / show button and the hidden content areas. You shouldn't need to write an event handler for each button, but have one that applies to all elements with the same function. Something like this:

<div class="col">
    Content 
    <div id="slidecontent-1" class="hide content">
        Hidden content goes here
    </div>
    <a id="slidebtn-1" class="more-btn" href="#slidecontent-1">Read more</a>
</div>
<div class="col">
    Content 
    <div id="slidecontent-2" class="hide content">
        Hidden content goes here
    </div>
    <a id="slidebtn-2" class="more-btn" href="#slidecontent-2">Read more</a>
</div>

And the event code:

$('.more-btn').click(function() {
    $('.content-open').slideToggle(500).toggleClass('content-open');
    $(this).parent().find('.content').slideToggle(500).toggleClass('content-open');
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more');
    return false;
});

thanks pharalia, this has almost got the exact effect I am after. Good idea on using classes, I don't know why I didn't use that in the first place. 1 problem though, if I open 1 section, and then go to press the close button, it toggles shut, but then back open again. I'm not too sure what is happening, do you have any ideas? Thanks again — jamie, Feb 09 '12 at 16:18
See my answer jamie, I had the same problem when I was trying it out, you could probably write something cleaner than what I wrote but it does do the job at least — Will Buck, Feb 09 '12 at 22:07

Ofir Baruch · Answer 3 · 2012-02-09T15:35:03.487

From what I understand , there is not reaction between slidecontent 1 and 2. If you want slidecontent1 to be be closed (after been opened) when slidecontent2 has been "activated" , you need to include an action for the other slidecontent. For instance:

$('#slidebtn-1').click(function() {
    $('#slidecontent-1').slideToggle(500);
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more');
    return false;
});
$('#slidebtn-2').click(function() {
    $('#slidecontent-2').slideToggle(500);
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more');
    $('#slidecontent-1').slideToggle(500);
    $('#slidecontent-1').text($('#slidecontent-1').text() == 'Read more' ? 'Close' : 'Read more');
    return false;
});

The truth is that it will be more effecient to use a general function for toggling those slidecontents and include in this function a loop (.each) that will close all the other slides.

Hi Ofir thanks for the reply, yeah that's exactly what I did the first try, however once you have one open, then close that one, then open a new they both end up opening, and then it really doesn't know what to do haha! — jamie, Feb 09 '12 at 16:34

Jquery multiple show and hide - but hide others if one is shown

3 Answers3