Question

I am working with 3 buttons and 3 sections in my page. Here’s the stripped down code.

http://jsfiddle.net/f6P87/17/

when loading the page:
FilterBtn is shown,
ResultsBtn is hidden,
DetailsBtn are shown.
Filters div is hidden,
Results div is shown,
Details div is hidden.

If the user clicks detailsBtn:
filterBtn is hidden,
ResultsBtn is shown,
ResultsSection div (including results div and filters div) is hidden,
Details div is shown.

If the user clicks resultsBtn:
filterBtn is shown,
resultsBtn is hidden,
results div is shown,
filters div is hidden,
details div is hidden.

If the user clicks filterBtn:
filterBtn is hidden,
resultsBtn is shown,
results div is hidden,
filters div is shown,
details div is hiden.

This isn’t currently working the way I want. When I click a button both divs are hidden no matter how i arrange them in the script. Can someone help me with the script logic to make this work?

Here is the HTML:

<div id="wrap">
    <div class="row">
        <div id="filterBtn"> <a href="#" class="button">Filters Button</a> 
        </div>
        <div id="resultsBtn"> <a href="#" class=" button">Results Button</a> 
        </div>
    </div>
    <div id="resultsSection" class="row" style="display:block;">
        <div id="filters">Filters Section</div>
        <div id="results">Results Section
            <div class="hide-for-small detailsBtn"> <a href="#" class=" button">Details Button</a> 
            </div>
        </div>
        <!-- Details -->
        <div id="detailSection" class="row details" style="padding-top:0px" ;>
            <div class="row">
                 <h3><small>Details Section</small></h3>

            </div>
        </div>

And Script:

$("#resultsBtn").click(function () {
    $("#detailSection").show("slow");
    $("#resultsSection").toggle("slow");
    $("#resultsBtn").hide("fast");
});

$(".detailsBtn").click(function () {
    $("#detailSection").show("slow");
    $("#resultsSection").hide("slow");
    $("#resultsBtn").show("fast");
      $("#filtersBtn").hide("fast");
});

$("#filterBtn").click(function () {
    $("#resultsBtn").show("fast");
    $("#filterBtn").hide("fast");
    $("#filters").show("slow");
    $("#resultsSection").hide("slow");    
});

Answer 1

Going by your HTML the reason everything hides is because you are telling it to hide the result section, which wraps around everything.

$("#filterBtn").click(function () {
    $("#resultsBtn").show("fast");
    $("#filterBtn").hide("fast");
    $("#filters").show("slow");

    // This hides the whole section which is wrapping around everything
    $("#resultsSection").hide("slow");    
});

I think you have to go through your expectations again and make sure you target the correct elements. Once working you can optimize the methods. I try to sort it out but it will take a little bit.

You had nearly all right except, some 1 or 2 </div> were missing and had to be added, the last line in the filter button event should have been referring to the #results element instead of the #resultsSection and in a few places you had the element id for the filter buttons misspelled. You wrote #filtersBtn instead of #filterBtn.

Anyway, the below should match your expectations now. the hide/shows are orderd now in the same order you listed them in your expectations.

—

DEMO – New Code

—

$("#resultsBtn").click(function () {
    $("#resultsSection").show("slow");
    $("#filterBtn").show("fast");
    $("#resultsBtn").hide("fast");
    $("#results").show("slow");
    $("#filters").hide("slow");
    $("#detailSection").hide("slow");
});

$(".detailsBtn").click(function () {
    $("#filterBtn").hide("fast");
    $("#resultsBtn").show("fast");
    $("#resultsSection").hide("slow");
    $("#detailSection").show("slow");
});

$("#filterBtn").click(function () {
    $("#filterBtn").hide("fast");
    $("#resultsBtn").show("fast");
    $("#results").hide("slow");
    $("#filters").show("slow");
    $("#detailSection").show("slow");
});