Jquery: How to make objects inside
to hide or show on click?

Question

I want to make a webpage in which three different contents show/hide when a button is clicked. The code is shown below.

I want the same page to show three contents:

only a search bar when button 'search' is clicked,
only the result of the search after a search is done or when the button 'results' is clicked, and
only the visualization of the search when one specific outcome of the results is chosen, or when the button 'visualization' is clicked.

Right now I only know how to show the results in different pages, not in the same one hiding what I don't want.

Code is below.

Thanks

<html lang="en">
<head>

  <title>Test</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <link rel="shortcut icon" href="docs-assets/ico/favicon.png">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link href="css/jumbotron-narrow.css" rel="stylesheet">
  <link href="css/jquery.dataTables.css" rel="stylesheet">
  <link rel="shortcut icon" type="image/ico" href="" />

  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/libs/jquery-2.0.3.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/libs/jquery.sprintf.js"></script>
  <script type="text/javascript" language="javascript" src="js/libs/jquery.dataTables.min.js"></script>

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      //xmakeTable("treaty");
    });

    makeTable = function(query) {
      var q = encodeURIComponent(query)
      $('#example').dataTable({
        "oLanguage": {"sSearch": "Filter results:"},
        "bProcessing": true,
        "bDestroy":true,
        "sAjaxSource": $.sprintf('http://leela.sscnet.ucla.edu/voteview/searchdt?q=%s',q),
        "aoColumns":[{"mData":"id", "sWidth": "20px", "sTitle":"ID"},
          {"mData":"chamber", "sWidth": "10px", "sTitle":"Chamber"},
          {"mData":"date", "sWidth": "85px", "sTitle":"Date"},
          {"mData":"yea","sTitle":"Vote","sWidth":"80px"},
          {"mData":"descriptionShort", "sWidth": "200px","sTitle":"Description"}],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
          $('td:eq(0)', nRow).html(
          $.sprintf('<a href="http://leela.sscnet.ucla.edu/newmap/index.html?id=%s">%s</a>',aData['id'],aData['id'])).attr("title","Click to explore this vote");
          $('td:eq(3)', nRow).html(
          $.sprintf('%s-%s',aData['yea'],aData['no']));
          $('td:eq(4)', nRow).attr("title",aData['description'])
          return nRow; }
      });
    }

    searchvotes = function() {
      $('#example').empty();
      makeTable($('#qqtext').val());
    };

  </script>

</head>

<body>

<div class="container">
  <div class="header">
    <ul class="nav nav-pills pull-right">
      <li><a href="home.html">Home</a></li>
      <li class="active"><a href="search.html">Search</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <h3 class="text-muted">VoteView</h3>
  </div>

  <div class="jumbotron">
    <div class="container">

      <div>
        <h3 align="center">Search for Roll Calls</h3>
        <div class="col-sm-12">
          <input type="search" class="form-control" placeholder="Search" id="qqtext" onchange="searchvotes()"></input>
        </div>
      </div>
      <br>
      <div>
        <div class="table-responsive">
          <table id="example" class="table table-striped"></table>
        </div>
      </div>

      <div>
        <div class="col-lg-14 col-md-14 portfolio-item" id="example">
        </div>
      </div>

    </div>
  </div>


  <div align="center">
    <button type="button" class="btn btn-primary btn-lg">
      <span class="glyphicon glyphicon-search"></span><br><a href="search.html"><font color="white">Search</font></a>
    </button>

    <button type="button" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-list"></span><br><a href="results.html"><font color="white">Results</font></a>
    </button>

    <button type="button" class="btn btn-warning btn-lg">
      <span class="glyphicon glyphicon-eye-open"></span><br><a href="results.html"><font color="white">Visualize</font></a>
    </button>
  </div>
  <br>



  <hr>

  <p></p>

  <footer>
    <p>Example</p>
  </footer>
</div>


</body>
</html>

If one tries a search with this code, the code should show results, but not the way I expect.

Thanks

Is this what you're looking for? http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button - take this logic apply to 3 divs with the same class name. — user602525, Dec 15 '13 at 06:54

score 0 · Answer 1 · answered Dec 15 '13 at 07:45

Probably not the solution but some hint to get there. Given this:

    <ul>
           <li class="collapsable"><h2>Release 3.0</h2>
        <ul>

            <li><h3>Allgemeine Übersicht</h3>
                <p>Text ....
            </li>

        </ul>

    </li>
    ....
    </ul>

I do:

<script type="text/javascript">
jQuery(document).ready( function () {

    jQuery('.collapsable').click(function () {
        jQuery(this).children('ul').first().toggle("slow");
    });

});
</script>

And

<style>
li.collapsable ul {
display: none;
}
</style>

A Click on the headline opens the <ul> and closes it again on next click (Actually, there is a lot of text in there and thus the list is very long)

score 0 · Answer 2 · answered Dec 15 '13 at 08:15

Firstly add an Id to your buttons to make things a bit easier

<button id="btnSearch" type="button" class="btn btn-warning btn-lg" />
<button id="btnResult" type="button" class="btn btn-warning btn-lg" />
<button id="btnVisual" type="button" class="btn btn-warning btn-lg" />

then make sure that you have the three mark-up sections on the page wrapped inside it's own div with an Id on each div.

<div id="search">
    ...
</div>

<div id="result">
    ...
</div>

<div id="visual">
    ...
</div>

In your JavaScript, set-up page for the initial conditions and handle the clicks on the buttons as required. In your search and visualisation functions just show and hide the appropriate div(s) for the conditions your require using JQuery's show() and hide() functions.

It may go something like this - just tweaks this snippet as required, to suit your actual scenario.

function reset() {
    $('#search').show();  
    $('#result').hide();
    $('#visual').hide();
}

function init() {

    var self = this;

    // button clicks 
    $('#search').click(function () {
        self.reset(); 
    });

    $('#results').click(function () {
        self.search();  
    });

    $('#visual').click(function () {
        self.visualize();  
    });
}

function search() {

    // Do search and set results table contents

    $('#search').hide();
    $('#result').show();
} 

function visualize() {

    // Do visualisation and set content

    $('#result').hide();
    $('#visual').show();
} 

$(document).ready( function () {
   this.reset();
   this.init(); 
)};

score 0 · Answer 3 · answered Dec 15 '13 at 08:35

0

You need to use toggle() It will hide element if its current status is visible and show if it is currently hidden:

$('.collapsable').click(function () {
     $(this).children('ul').first().toggle();
});

answered Dec 15 '13 at 08:35

Zaheer Ahmed

28,160
11
74
110

Jquery: How to make objects inside to hide or show on click?

3 Answers3

Jquery: How to make objects inside
to hide or show on click?