jQuery- How to close div that is toggled by h2 elements when trying to toggle another div?

Question

I have two header elements(Desktop Computers and Tablets) that I want to toggle open and change the image sign once toggling. I have this part working. However, I want it to untoggle the previously toggled div element upon clicking the other header element.

HTML:

<h1>PA Computer Store</h1>
    <h2 class = "firstH2">Desktop Computers</h2>
    <div class = "outsideDiv">
        <ul>    
            </li><h3>HP</h3></li>
                <div>
                    <ul id="HP_images">
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    </ul>
                </div>
                <li><h3>Apple</h3></li>
                <div>
                    <ul id="Apple_images">
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    </ul>
                </div>

        </ul>
    </div>
    <h2 class="secondH2">Tablets</h2>
    <div class='outsideDiv'>
    <ul>    
        </li><h3>Samsung</h3></li>
            <div >
                <ul id="Samsung_images">
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                </ul>
            </div>
            <li><h3>Apple</h3></li>
            <div>
                <ul id="AppleTab_images">
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                </ul>
            </div>

    </ul>
    </div>

JQUERY:

 $(document).ready(function() {

$("#categories h2").toggle(
    function() {
        $(this).toggleClass("minus");
        $(this).next().show();  
    },
        function() {
        $(this).toggleClass("minus");
        $(this).next().hide();  
    }
); 
$("#categories h3").toggle(
    function() {
        $(this).toggleClass("minus");
        $(this).next().show();
    },
    function() {
        $(this).toggleClass("minus");
        $(this).next().hide();
    }
); 

});

Relevant CSS:

h2 {
    font-size: 120%;
    padding: .25em 0 .25em 25px;
    cursor: pointer;
    background: url(images/plus.png) no-repeat left center;
}
h2.minus {
    background: url(images/minus.png) no-repeat left center;
}
li{
    list-style-type:none;
}
h3{
    font-size: 100%;
    padding: .50em 0 .50em 25px;
    cursor: pointer;
    background: url(images/plus.png) no-repeat left center;
}
h3.minus {
    background: url(images/minus.png) no-repeat left center;
}

Answer 1

CHANGES

• Changed all <ul> to <dl>
• Changed all <li> to <dd>
• Changed all <h3> to <dt>
• Changed all <div> to <section>
• Simplified the jQuery to delegate alternating classes independent of the other type.
• Added smooth transitions in CSS
• Replaced the plus and minus PNG for font icons

SNIPPET

 $(document).ready(function() { $('h2').on('click', function() { if ($(this).hasClass('plus')) { $('h2').addClass('plus').removeClass('minus'); $(this).addClass('minus').removeClass('plus'); } else { $(this).addClass('plus').removeClass('minus'); } }); $('dt').on('click', function() { if ($(this).hasClass('plus')) { $('dt').addClass('plus').removeClass('minus'); $(this).addClass('minus').removeClass('plus'); } else { $(this).addClass('plus').removeClass('minus'); } }); }); 

 h2 { font-size: 2rem; padding: .25em 0 .25em 25px; cursor: pointer; } h2.plus:before { font-size: 1.75rem; content: '➕'; } h2.minus:before { font-size: 1.75rem; content: '➖'; } dt { font-size: 1.75rem; padding: .50em 0 .50em 25px; cursor: pointer; } dt.plus:before { font-size: 1.25rem; content: '➕'; } dt.minus:before { font-size: 1.25rem; content: '➖'; } .plus + section { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 1s ease-out, opacity 1.5s linear .5s; } .minus + section { max-height: 1500px; opacity: 1; transition: max-height 1.25s ease-in, opacity 2s linear; } section { margin: 30px auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>PA Computer Store</h1> <h2 class="plus firstH2">Desktop Computers</h2> <section class="outsideDiv"> <dl> <dd> <dt class='plus'>HP</dt> <section> <dl id="HP_images"> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> </dl> </section> <dd> <dt class='plus'>Apple</dt> <section> <dl id="Apple_images"> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> </dl> </section> </dl> </section> <h2 class="plus secondH2">Tablets</h2> <section class='outsideDiv'> <dl> <dd> <dt class='plus'>Samsung</dt> <section> <dl id="Samsung_images"> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> </dl> </section> <dt class='plus'>Apple</dt> <section> <dl id="AppleTab_images"> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> <dd> <a href="newpage.html"> <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48"> </a> </dd> </dl> </section> </dl> </section> </dl>