jquery dropdown box - multiple

Posted on 2012-08-12
Last Modified: 2012-08-12
Hi, I have a page where i want jquery to toggle multiple dropdown boxes eg;

Button1 - toggles contentbox1
Button2 - toggles contentbox2
Button3 - toggles contentbox3

<a href="#"  id="button1">One</a>
<a href="#"  id="button2">Two</a>
<a href="#"  id="button3">Three</a>

<div id="contentbox1" style="display: none;">content box one</div>
<div id="contentbox2" style="display: none;">content box two</div>
<div id="contentbox3" style="display: none;">content box three</div>

Open in new window

        }, function(){

Open in new window

How would I use this same function to slide up and down different boxes with different buttons instead of duplicating the code for each button/contentbox.
...and when a box is down and I click a button to drop another box do I make the box that is already down slide up first?

Question by:joethermal
    LVL 35

    Accepted Solution

    try this:
    var activeBox = null;
        if (activeBox) {
          $('#button' + activeBox).click(); /* call second toggle function to hide the active box */
        activeBox =;
        $('#contentbox' + activeBox).slideDown();
      }, function(){
        $('#contentbox' +;
        activeBox = null;

    Open in new window

    LVL 50

    Assisted Solution

    by:Julian Hansen
    Alternative. Add class to <a> to pick up generic click. Then make the <div>'s id based on the id of the button - wht a static suffix - the rest is trivial.

    <a href="#"  id="button1" class="button-box">One</a>
    <a href="#"  id="button2" class="button-box">Two</a>
    <a href="#"  id="button3" class="button-box">Three</a>
    <div id="button1_box" style="display: none;">content box one</div>
    <div id="button2_box" style="display: none;">content box two</div>
    <div id="button3_box" style="display: none;">content box three</div>

    Open in new window

                $('#' + $(this).attr('id') + '_box').slideDown();
            }, function(){
                $('#' + $(this).attr('id') + '_box').slideUp();

    Open in new window

    LVL 1

    Author Closing Comment

    Thanks - just what i wanted

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now