Slide multiple divs, only one show, others hide

Question

I use slideToggle() for my ..read more/less content, they change it. How can I make only one hidden text to show up, so when I click them, the "old" hidden text slideUp, and the "new" show only.

var moreText = "... Read More",
lessText = "... Read Less";

$(".read_more").click(function () {
    var $this = $(this);
    $this.text($this.text() == moreText ? lessText : moreText)
        .prev(".more")
        .slideToggle("normal");
});

Thanks.

Answer 1

Just add a slideUp for the other .more elements

$(".read_more").click(function () {
    var more = $(this).text(function(_,txt) {
        return txt == '... Read More' ? '... Read Less' : '... Read More';
    }).prev(".more");

    $('.more').not(more).slideUp().text('... Read More');
    more.slideToggle("normal");
});