Jquery show only a single div and toggle others via drop down select change or button click

Question

I am trying to show only a single div's content at a time but each div should be able to toggle on drop down selection change, or a button being clicked.

When the user selects an option from a drop down it will display a table (and hide any other div that is visible), if they choose something else, the table will update (I have the table updating properly).

(All options within the drop downs are generated from a MySQL query, and generated via PHP - the second drop down is dependent on the first selection - this is working.)

When the user clicks a button it will display a form and hide any other visible div.

There are multiple drop downs and multiple buttons to display different div content.

I have my page seperated into 2 sections, one is "adminpanel" and the other is "content". All drop down's and buttons are displayed within the "adminpanel" and all data I need to be displaying should be showing up within the divs inside of the "content" section.

The biggest problem I am having is trying to only display one content div at a time.

HTML

<div class="content">
    <div class="toggle" id="accounts">
        //displays the account a user selects
    </div>

    <div class="toggle" id="facilities">
        //table
    </div> 

    <div class="toggle" id="users">
        //table
    </div>

    <div class="toggle" id="newaccount_form">
        //form
    </div>

    <div class="toggle" id="newfacility_form">
        //form
    </div

    <div class="toggle" id="newuser_form">
        //form
    </div>
</div>

Then I have my controls that are generated from a PHP file that get some data from a MYSQL db.

<div id="adminpanel">
    <?php
        //Accounts
        echo $accountDropDown;
        echo "<button class='toggle_control' data='newaccount_form' id='newaccount'>New Account</button>";

        echo $facilityDropDown;
        echo"<button class='toggle_control' data='newfacility_form' id='newfacility'>New Facility</button>";

        //Users
        echo $userDropDown;
        echo "<button class='toggle_control' data='newuser_form' id='newuser'>New User</button>";
    ?>  
</div>

This is what the $accountDropDown looks like, each drop down looks the same.

while ($aRow = mysqli_fetch_array($accountData)) {
     $accountOptions .="<option class='toggle_control' data='accounts' value="".$aRow['account_id']."">" . $aRow['account_name'] . "</option>";
}

$accountDropDown="  <label>Accounts: </label><br>
                    <select name='account' id='account'>
                        <option class='toggle_control' data='accounts' selected='selected' disabled='disabled' value=''>Select account</option>
                    " . $accountOptions . "
                    </select>";

And here is the JQuery function I am having trouble with

    $(function(){
    $("#newaccount_form, #newuser_form, #newfacility_form").hide();

    $(".toggle_control").on('click', function() 
    {
    $(".toggle").hide("slow");
    var dataSelectorId = $(this).attr("data");
    if ($('#' + dataSelectorId).is(":hidden")) {
        $("#" + dataSelectorId).slideToggle("slow");
        }
    });
});

The problem I am having here is hiding all other visible divs when the user makes a change on the drop down selector.

Each button should be hitting a click event, while each drop down should be hitting a change event.

I know I am doing this all wrong, how should I be determining whether a click or change event gets triggered, and toggle each corresponding div accordingly?

Answer 1

I believe this is what you are looking for, I realized your controls were in DIFFERENT divs than the ones you were trying to toggle. I had to add the "_form" to the end of the selector. This relies on the convention that for every control, there is a matching div with the same ID + "_form".

The other issue was that var content was out of scope in the click event, so I removed it altogether. This makes the $(".content div") selector repetitive but that is fine in this example. If you really want to store that set of divs in a variable, put the variable declaration itself outside the document.ready function.

The THIRD issue I came across was that you were using a set of objects (your target_content) as a selector, which, to my knowledge, doesn't work. I instead put the selector (as a string) into a var and reused it for both slideToggle and slideUp calls.

//Hide and toggle all divs so the user can only see one div at a time. 
$(document).ready(function()
{
    //hide every div by its ID
    $(".content div").hide();

    $("#newaccount, #newuser, #newfacility, #account, #user").on("click", function()
    {
        var selector = '#'+ this.id + "_form";
        $(selector).slideToggle();
        $(".content div").not(selector).slideUp(); // or hide()    
    });
});

Working sample here:

http://jsfiddle.net/nnordhaus/4r9zyvtu/