how to hide show content with jquery

Question

i'm creating a work section and in that section i've created a navigation with some image containers

now when the user click on one of the navigation link . it would show the relative image container linked to that navigation link . for example if i clicks on the branding link it will show me the image container with the class branding. it's just like mix it up plugin but i'm not allowed to use mixitup.

i was trying this : https://jsfiddle.net/to1uuvnb/19/

but it didn't helped

   <ul class="nav nav-pills nav-justified nav-tabss">
        <li class="active">
          <a href="#">All</a>
        </li>
        <li>
          <a href="#">Branding</a>
        </li>
        <li>
          <a href="#">Advertise</a>
        </li>
        <li>
          <a href="#">Print</a>
        </li>
      </ul>

      <div class="branding">
        branding
      </div>
      <div class="advertise">
        advertise
      </div>
      <div class="print">
        print
      </div>

my js

$('.nav-tabss').children('li').click(function(){

 var branding = $(this).text();

 if ( branding === "branding" )
 {
    $('.branding').show();
    $('.adverise').hide();
    $('.print').hide()
 }

});

i know my js code is not efficient . if you guys can update the code that would be better and helpful thanks

What do you mean _you are not allowed_? Is this an assignment? — putvande, Aug 22 '15 at 13:16
You should use **id** attributes instead of **class** here to identify the divs: ```
...``` etc. see this question: http://stackoverflow.com/questions/6460644/in-jquery-is-selecting-by-class-or-id-faster-than-selecting-by-some-other-attri — Imashcha, Aug 22 '15 at 13:25

score 4 · Accepted Answer · answered Aug 22 '15 at 13:24

4

$('.nav-tabss li a').click(function(){

    var branding = $(this).text();
//alert(branding)
     if ( branding === "Branding" )
     {
        $('.branding').show();
        $('.advertise').hide();
        $('.print').hide()
     }
    if ( branding === "All" )
     {
        $('.branding').show();
        $('.advertise').show();
        $('.print').show()
     }
     if ( branding === "Advertise" )
     {
        $('.branding').hide();
        $('.advertise').show();
        $('.print').hide()
     }
    if ( branding === "Print" )
     {
        $('.branding').hide();
        $('.advertise').hide();
        $('.print').show()
     }


  });

use this code

answered Aug 22 '15 at 13:24

Harshit Sethi

559
1
5
22

What if he wants to change the text of the links, this'll break. – brenjt Aug 22 '15 at 13:38
yes exactly, this can also be done if he uses the classes on the anchor tag, and use them accordingly there are many ways to do this thing using parent child concept also – Harshit Sethi Aug 22 '15 at 13:42
How is this the accepted answer, its overly complicated code. The OP is using bootstrap he's better off using bootstrap as its intended. – PickYourPoison Aug 24 '15 at 16:27

score 2 · Answer 2 · answered Aug 22 '15 at 13:28

Check you want the same:

$('.nav-tabss').children('li').click(function(){

    var branding = $(this).text().trim().toLowerCase();

     if ( branding === "branding" )
     {
        $('.branding').show();
        $('.advertise').hide();
        $('.print').hide()
     }
    else if( branding === "advertise" )
     {
        $('.branding').hide();
        $('.advertise').show();
        $('.print').hide()
     }
    else if( branding === "print" )
     {
        $('.branding').hide();
        $('.advertise').hide();
        $('.print').show()
     }
    else 
     {
        $('.branding').show();
        $('.advertise').show();
        $('.print').show()
     }

  });

Click here

score 2 · Answer 3 · answered Aug 22 '15 at 13:59

You can use data attribute instead of using href or text node, data attribute is flexible.

HTML

<ul class="nav nav-pills nav-justified nav-tabss">
   <li class="active"> <a data-filter="all" class="trigger" href="#">All</a></li>
   <li> <a data-filter="branding" class="trigger" href="#">Branding</a></li>
   <li> <a data-filter="advertise" class="trigger" href="#">Advertise</a></li>
   <li> <a data-filter="print" class="trigger" href="#">Print</a></li>
</ul>

<div class="branding">branding</div>
<div class="advertise">advertise</div>
<div class="print">print</div>

Javascript code use switch statement to show hide divs.

JS

$('.trigger').click(function (e) {

    e.preventDefault();

    var branding = $(e.target).data('filter');
    console.log(branding);

    switch (branding) {

        case "branding":
            $('.branding').show();
            $('.advertise').hide();
            $('.print').hide();
            break;

        case "advertise":
            $('.advertise').show();
            $('.branding').hide();
            $('.print').hide();

            break;

        case "print":
            $('.advertise').hide();
            $('.branding').hide();
            $('.print').show();
            break;

        case "all":
            $('.advertise').show();
            $('.branding').show();
            $('.print').show();
            break;

        default:
            $('.branding').show();
            $('.advertise').show();
            $('.print').show();

    }

JSFiddle Link

brenjt · Answer 4 · 2015-08-22T13:45:26.347

Well looking at your html it looks like you're using bootstrap. Why don't you just use bootstrap's tabs:

$(function() {
  $('#nav-tabss a').click(function(e) {
    e.preventDefault()
    $(this).tab('show')
  })
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div>
  <ul class="nav nav-pills nav-justified" id="nav-tabss">
    <li class="active">
      <a href="#none" data-toggle="tab">All</a>
    </li>
    <li>
      <a href="#branding" data-toggle="tab">Branding</a>
    </li>
    <li>
      <a href="#advert" data-toggle="tab">Advertise</a>
    </li>
    <li>
      <a href="#print" data-toggle="tab">Print</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="none">None</div>
    <div class="tab-pane" id="branding">Branding</div>
    <div class="tab-pane" id="advert">Advertise</div>
    <div class="tab-pane" id="print">Print</div>
  </div>
</div>

score 0 · Answer 5 · answered Aug 22 '15 at 13:18

0

Try this

$('.nav-tabss').on('click','a',function(){

var branding = $(this).text();

 if ( branding === "Branding" )
 {
    $('.branding').show();
    $('.adverise').hide();
    $('.print').hide()
 }

});

answered Aug 22 '15 at 13:18

Jithin Lukose

344
4
18

how to hide show content with jquery

5 Answers5