CODEWITHSUNDEEP
htmltwitter-bootstrap
Borisw37
Borisw37

Reputation: 759

Hide element based on NavBar?

Is there a way to hide/show elements based on the bootstrap NavBar selection without additional JS or jQuery?

I have a NavBar with ("T1", "T2", "T3"). The page has three tables (T1, T2, T3). When "T1" is pressed in the NavBar, I would like to hide T2 and T3, etc..

Upvotes: 0

Views: 1820

Answers (1)

sgbj
sgbj

Reputation: 2274

Is there a way to hide/show elements based on the bootstrap NavBar selection without additional JS or jQuery?

Kind of

You can use Bootstrap's collapse plugin to emulate an accordion for your tables. The collapse plugin works by using a few CSS classes and data attributes to show and hide content.

<a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Expand/collapse
</a>
<div id="collapseExample" class="collapse">
    Here's the content you want to expand/collapse.
</div>

You can specify a data-parent attribute on the collapsible content to achieve an accordion-like behavior (i.e., only one section is visible at a time). Bootstrap's documentation shows how to create an accordion using the data-parent attribute.

I put together a snippet below that looks similar to what you've described in your question. You can also view the example on Codepen.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
  <a class="navbar-brand" href="#">Site</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" id="headingOne" href="#collapseOne" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">Table 1</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" id="headingTwo" href="#collapseTwo" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo">Table 2</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" id="headingThree" href="#collapseThree" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseThree">Table 3</a>
      </li>
    </ul>
  </div>
</nav>

<div id="accordionExample">
  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
    <h2>Table 1</h2>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Numbers</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <th>3</th>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
    <h2>Table 2</h2>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">More numbers</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <th>3</th>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
    <h2>Table 3</h2>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Even more numbers</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <th>3</th>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Caveat

The behavior may not be exactly what you want. If that's the case, then you'll probably have to resort to using JS to solve this problem. There are definitely other examples of showing and hiding content without JS, but it may be difficult to achieve what you're looking for without it.

Upvotes: 1

Related Questions