javascript - How can I show and hide different <section> of my html page using jquery? -
i have 2 sections on results page, 1 showing results table , 1 showing various charts based on results, thee in <section> tags, default 1 shown table: <section class="results_table" style="display: inline"> how can use jquery hide , show chart section: <section class="results_charts" style="display: none"> when relitive button 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 trying found in similar question:
$("#chart").on("click", "#switch", function(e){ $("#results_table, #results_charts").toggle(); }); but dont know how add second button, not toggling views :)
secondly if can recommend javascript/jquery tutorials?
***** html page ***** page being loaded subview 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 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>' . ' , ' . '<font class="text-primary">' . '<strong>' . $_post['edate'] . '</strong>' . '</font>';} else{echo "<font class='text-danger'>" . "<strong>" . "no date range specified" . "</strong>" . "</font>";} ?></p> <p><?php if($_post['terms']){echo 'with following keywords: ' . '<font class="text-primary">' . '<strong>' . $_post['terms'] . '</strong>' . '</font>';} else{echo "<font class='text-danger'>" . "<strong>" . "no keywords 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 found match: " . $_post['terms']; }else {echo "no results found"; } ?></th> </tr> </thead> <tbody> <tr> <?php foreach ($results $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> 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>
use show charts section
$("#chart").on("click", function(){ $("#results_table").hide(); $("#results_charts").show(); }); use show results
$("#table").on("click", function(){ $("#results_charts").hide(); $("#results_table").show(); });
Comments
Post a Comment