Question

I have a very basic accordion-like (http://jqueryui.com/accordion/) content display system. i’m new at this and also stubborn, so I didn’t use the one provided.
here is the code:

        $(".listitem").click(function(){
            $("#info"+$(this).attr('id')).slideToggle("fast");
        });

<h3 class="listitem" id="1">title 1</h3>
<div id="info1">blah blah blah 1</div>

<h3 class="listitem" id="2">title 2</h3>
<div id="info2">blah blah blah 2</div>

all the list items have the id of a number 1-6 or whatever, and the hidden content has the id of “info” + the corresponding number. My question is how could I make it such that when a new item is clicked, it closes the previous one?

Answer 1

Keep track of which one’s open.

(function() {
    var open = -1;
    $(".listitem").click(function() {
        var id = this.getAttribute("data-page");
        if( id != open) {
            $("#info"+id+", #info"+open).slideToggle("fast");
            open = id;
        }
    });
})();

<h3 class="listitem" data-page="1">title 1</h3>
<div id="info1">blah blah blah 1</div>

<h3 class="listitem" data-page="2">title 2</h3>
<div id="info2">blah blah blah 2</div>

Note that I have replaced your id attributes with data-page, since in HTML4 it is not valid to have an ID starting with a number and it’s inappropriate use of ID anyway. Additionally, I replaced the $(this).attr(...) with its vanilla JS equivalent for efficiency.