How can I show and hide different <section> of my html page using jquery?

Question

I have 2 sections on a results page, one showing a results table and one showing various charts based on the results, thee are in <section> tags, the default one shown is the table: <section class="results_table" style="display: inline"> how can I use jquery to hide this and show the chart section: <section class="results_charts" style="display: none"> when the relitive button is clicked

<div class="btn-group">
    <button type="button" id="table" class="btn btn-primary">Table</button>
    <button type="button" id="chart" class="btn btn-primary">Charts</button>
</div>

Im currently trying this I found in a similar question:

$("#chart").on("click", "#switch", function(e){
$("#results_table, #results_charts").toggle();
});

But I dont know how to add the second button, also Its not toggling my views :)

Secondly if anyone can recommend any good javascript/jquery tutorials?

***** HTML PAGE ***** This page is being loaded as a subview from my controller: Search/execute_search

    <section class="results_head">
    <div class="row">
        <div class="col-md-12"><!--<?php if(empty($chart)){echo "EMPTY" . '<br />';} else{ print_r($chart);} ?>--></div>
    </div>
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 btn_down"><a href="#bottom"><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down" /> Bottom <span class="glyphicon glyphicon-arrow-down" /></button></a></div>
        <div class="col-md-4"><input type="hidden" id="chartData" value='<?php echo $chart; ?>' /></div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="results_count">
                <h3><strong>Your Search:</strong></h3>
                <p>Results Table: <font class="text-primary"><strong><?php if($_POST['tbl'] === 'p_results'){echo "New Table";} else{echo "Old Table"; } ?></strong></font></p>
                <p class="cat">Catogory: <font class="text-primary"><strong><?php if($_POST['col'] === 'code'){echo "test";} else{echo str_replace('_', ' ', $_POST["col"]);} ?></strong></font></p>
                <p><?php
                    if($_POST['col'] == 'result' && $_POST['res'] == NULL){echo 'Showing ' . '<font class="text-primary">' . '<strong>' . "ALL" . '</strong>' . '</font>' . ' results';}
                    elseif ($_POST['col'] == 'result'){echo 'Showing all results for: ' . '<font class="text-primary">' . '<strong>' . $_POST["res"] . '</strong>' . '</font>';}
                    else{;} ?>
                </p>
                <p style="text-transform: capitalize;"><?php if($_POST['res']){echo 'Result set: ' . '<font class="text-primary">' . '<strong>' . $_POST['res'] . ' Results' . '</strong>' . '</font>';} else{echo 'Result set: ' . '<font class="text-primary">' . '<strong>' . "All Results" . '</strong>' . '</font>';} ?></p>
                <p><?php if($_POST['sdate'] && $_POST['edate']){echo 'Within Date Ranges: ' . '<font class="text-primary">' . '<strong>' . $_POST['sdate'] . '</strong>' . '</font>' . ' and ' . '<font class="text-primary">' . '<strong>' . $_POST['edate'] . '</strong>' . '</font>';} else{echo "<font class='text-danger'>" . "<strong>" . "No Date Range was specified" . "</strong>" . "</font>";} ?></p>
                <p><?php if($_POST['terms']){echo 'With the following keywords: ' . '<font class="text-primary">' . '<strong>' . $_POST['terms'] . '</strong>' . '</font>';} else{echo "<font class='text-danger'>" . "<strong>" . "No keywords were specified" . "</strong>" . "</font>";} ?></p>
                <hr />
                <p><?php echo "Your Search Returned" . " " . '<strong>' .'<font class="text-primary">' . count($results) . '</font>' . '</strong>' .  " " . "Results, " .
                        "out of " . '<strong>' . '<font class="text-primary">' . count($totals) . '</font>' . '</strong>' . " records."?></p>
            </div>
        </div>
        <?php if(empty($chart)){echo "<div class='col-md-4'>" . "</div>";} else{echo "<div class='col-md-4 chart' id='donut'>" . "</div>";} ?>
        <div class='col-md-4'></div>
    </div>
    <div class="row">
        <div class="col-md-12  select_menu">
            <div class="btn-group">
               <button type="button" id="table" class="btn btn-primary">Table</button>
                <button type="button" id="chart" class="btn btn-primary">Charts</button>
            </div>
        </div>
    </div>
</section>
<section class="results_table" style="display: inline">
    <div class="row tbl_row">
        <div class="col-md-12">
            <table class="tbl_results">
                <thead>
                    <tr>
                        <th><?php if($results){echo implode('</th><th>', array_keys(current($results))); } elseif($_POST['terms']){echo "No Results were found to match: " . $_POST['terms']; }else {echo "No Results Found"; } ?></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <?php foreach ($results as $row): array_map('htmlentities', $row); ?>
                    <tr>
                        <td><?php echo implode('</td><td>', $row); ?></td>
                    </tr>
                        <?php endforeach; ?>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="top_btn">
                <a href="#top"><button type="button" class="btn btn-primary">
    <span class="glyphicon glyphicon-arrow-up"></span> Back to Top <span 
    class="glyphicon glyphicon-arrow-up"></span></button></a>
                <a name="bottom">
            </div>
        </div>
        <div class="col-md-8"></div>
    </div>
</section>
<section class="results_charts" style="display: none">
    <div class="row">
        <div class="col-md-12 chart2" id="bar"></div>
    </div>
    <div class="row">
        <div class="col-md-12 chart2" id="line"></div>
    </div>
    <div class="row">
        <div class="col-md-12 chart2" id="area"></div>
    </div>
    <div class="row">
        <div class="col-md-12"></div>
    </div>
</section>

Answer 1

You need to do like below:-

$(document).ready(function(){
  $("#table, #chart").on("click",function(e){
    $(".results_table, .results_charts").toggle();
  });
});

Example:-

 $(document).ready(function(){ $("#table, #chart").on("click",function(e){ $(".results_table, .results_charts").toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="results_table" style="display: inline">Results Table</section> <section class="results_charts" style="display: none">Results Charts</section> <div class="btn-group"> <button type="button" id="table" class="btn btn-primary">Table</button> <button type="button" id="chart" class="btn btn-primary">Charts</button> </div> 

Or without toogle() do like below:-

 $(document).ready(function(){ $("#chart").on("click", function(){ $(".results_table").hide(); $(".results_charts").show(); }); $("#table").on("click", function(){ $(".results_charts").hide(); $(".results_table").show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="results_table" style="display: inline">Results Table</section> <section class="results_charts" style="display: none">Results Charts</section> <div class="btn-group"> <button type="button" id="table" class="btn btn-primary">Table</button> <button type="button" id="chart" class="btn btn-primary">Charts</button> </div> 

Working fiddle with your updated HTML:- https://jsfiddle.net/42ahxqu3/ Or https://jsfiddle.net/svL8ugzr/ (i removed php variables to show you in a clean manner)

Answer 2

Use this to show the charts section

$("#chart").on("click", function(){
  $("#results_table").hide();
  $("#results_charts").show();  
});

Use this show only the results

$("#table").on("click", function(){
  $("#results_charts").hide();  
  $("#results_table").show();
});

Answer 3

This solution will allow you to add more sections and corresponding buttons easily. Just set the section you want to show as an attribute of the button.

I've also added an active class so it's obvious what's happening for the user.

 $(function() { $('.toggle-button').first().addClass('active'); // ADD ACTIVE STYLE TO FIRST BUTTON $('.toggle-content').not(':first').hide(); // KEEP THE FIRST SECTION SHOWING BUT HIDE OTHERS $('.toggle-button').on('click', function() { $('.toggle-content').hide(); // HIDE ALL SECTIONS $('.toggle-button').removeClass('active'); // MARK ALL BUTTONS INACTIVE var toggleElementId = $(this).attr('data-toggle'); // GET ID FROM DATA ATTRIBUTE $(toggleElementId).show(); // SHOW CORRECT SECTION $(this).addClass('active'); // MAKE CURRENT BUTTON ACTIVE }); }); 

 .active { background-color: #f0f; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="btn-group"> <button data-toggle="#table" class="toggle-button btn btn-primary">Table</button> <button data-toggle="#charts" class="toggle-button btn btn-primary">Charts</button> </div> <section class="toggle-content" id="table">Some stuff</section> <section class="toggle-content" id="charts">Some other stuff</section>