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

Answer 1

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?