CODEWITHSUNDEEP
jqueryhtml-liststoggleshow-hide
KevinPatrick
KevinPatrick

Reputation: 3

jQuery toggle of independent divs by clicking list items

I want to present a horizontal list of items, each connecting to an independent div through an 'id'. I want the div connected to the item to toggleFade. The default is to have all divs hidden. And then as users click on another item, the previously open div will close.

Here's the html:

<div id="menu">
        <ul>
            <li><a class="menuitem" href="#smPlates">Small Plates</a></li>
            <li><a class="menuitem" href="#salads">Salads</a></li>
            <li><a class="menuitem" href="#burgers">Burgers</a></li>
            <li><a class="menuitem" href="#desserts">Desserts</a></li>
        </ul>

        <!-- Small Plates menu -->
        <div class="menubox" id="smPlates">
            <p>Content of smPlates</p>
        </div>

        <!-- Salads menu -->
        <div class="menubox" id="salads">
               <p>Content of salads</p>
        </div>

        <!-- Burgers menu -->
        <div class="menubox" id="burgers">
               <p>Content of burgers</p>
        </div>

        <!-- Desserts menu -->
        <div class="menubox" id="desserts">
                <p>Content of desserts</p>
        </div>
</div>

I have the following jQuery code that effectively toggleFades the divs, but all of them, and i tried to use attr('id') to get the corresponding div for each list item but it hasn't worked:

$(document).ready(function() {
    $(".menubox").hide();

    $(".menuitem").click(function(event) {
        event.preventDefault();
        var menubox = $(".menubox");
        $(".menubox").not(menubox).hide()
        menubox.fadeToggle("slow","linear"); 
    });
});

I don't have a lot of proficiency in jQuery and any help or guidance will be greatly appreciated!

Upvotes: 0

Views: 3502

Answers (2)

Elliot B.
Elliot B.

Reputation: 17661

Working solution: http://jsfiddle.net/9Cxx2/

$(document).ready(function() {
    $(".menubox").hide();

    $(".menuitem").click(function(event) {
        event.preventDefault();

        $('.menubox').hide();

        $($(this).attr('href')).fadeToggle("slow","linear");;

    });
});​

Upvotes: 1

emre nevayeshirazi
emre nevayeshirazi

Reputation: 19241

$(document).ready(function() {

    // Hide all menuboxes initially
    $(".menubox").hide();

    $(".menuitem").click(function(event) {
        event.preventDefault();

        // Hide the menubox that is allready opened
        $(".menubox").hide();

        // Get the new menubox from the href attribute of menuitem
        var relatedDivID = $(this).attr('href');

        // Fade new menubox
        $(relatedDivID).fadeToggle("slow","linear"); 
    });
});

Working fiddle.

Upvotes: 0

Related Questions