Show and hide div

Asked

Viewed 1,467 times

1

I need to make a function that when clicked only the div with the passed class is visible and the others are hidden. 

<a href="javascript:teste('minhaDiv');" class="expander">Link</a>
<a href="javascript:teste('minhaDivo');" class="expander">Link</a>
<div class="container">
   <div class="minhaDiv" style="display: none">Div que aparece e some</div>
   <div class="minhaDiv" style="display: none">Div que aparece e some</div>
   <div class="minhaDiv" style="display: none">Div que aparece e some</div>
   <div class="minhaDivo" style="display: none">Div que aparece e some</div>
  <div class="minhaDivo" style="display: none">Div que aparece e some</div>
</div>

function teste(div){
    $('.container').each(function() {
        if($(this).attr('class') = div){
            $(this).show();     
        }else{
        $(this).hide()
     };
    });
}
javascript jquery

  • That code of yours doesn’t work ?

4 answers

4

You can do it like this:

function teste(div) {
    $('.container > div').each(function() {
        $(this).toggle($(this).hasClass(div));
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:teste('minhaDiv');" class="expander">Link</a>
<a href="javascript:teste('minhaDivo');" class="expander">Link</a>
<div class="container">
    <div class="minhaDiv" style="display: none">Div que aparece e some</div>
    <div class="minhaDiv" style="display: none">Div que aparece e some</div>
    <div class="minhaDiv" style="display: none">Div que aparece e some</div>
    <div class="minhaDivo" style="display: none">Div que aparece e some</div>
    <div class="minhaDivo" style="display: none">Div que aparece e some</div>
</div>

The idea is:

  • $('.container > div') selects all Ivs within container
  • $(this).toggle(...) shows or hides depending on the argument passed true or false
  • $(this).hasClass(div) checks whether the element has that class

  • Here did not work at first click already hid ". container"

  • @Pauloamaral my example works as you wish?

3

Has, 2 problems in your method:

  1. if has to be "==", when you use a single "=", you are adding value within the condition.
  2. you need to inform the correct element that will make the loop

In case it’s the div inside your container:

 function teste(div){
        $('.container div').each(function() {
            if ($(this).attr('class') == div) {
                $(this).show();     
            } else {
                $(this).hide();
            }
        });
   }

  • +1 for explaining the =. Warning for who to use: if the widget has more than one class o $(this).attr('class') == div will give false

2


I believe this way would meet your expectations, with an easy-to-understand code

function teste(div){    
    $(".container > div").hide();
    $('.' + div).show();    
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a onclick="teste('minhaDiv');" class="expander">Link1</a>
<a onclick="teste('minhaDivo');" class="expander">Link2</a>
<div class="container">
   <div class="minhaDiv" style="display: none">Div que aparece e some</div>
   <div class="minhaDiv" style="display: none">Div que aparece e some</div>
   <div class="minhaDiv" style="display: none">Div que aparece e some</div>
   <div class="minhaDivo" style="display: none">Div que aparece e some</div>
  <div class="minhaDivo" style="display: none">Div que aparece e some</div>
</div>

  • "Typeerror: a is Undefined";

  • The above code works, you can run it there must be something else in your code probably an "a" variable that has not been defined

  • This error returns "jquery.js:3531 Uncaught Typeerror: Cannot read Property 'nodetype' of Undefined"

2

Another way is to use siblings jQuery:

  $('div.'+div).siblings().hide();
  $('div[class="'+ div +'"]').css("display","inline"); 


function teste(div) {
  $('div.'+div).siblings().hide();
  $('div[class="'+ div +'"]').css("display","inline"); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a onclick="teste('minhaDiv');" class="expander">Link</a>
<a onclick="teste('minhaDivo');" class="expander">Link</a>
<div class="container">
  <div class="minhaDiv" style="display: none">Div que aparece e some 1</div>
  <div class="minhaDiv" style="display: none">Div que aparece e some 1</div>
  <div class="minhaDiv" style="display: none">Div que aparece e some 1</div>
  <div class="minhaDivo" style="display: none">Div que aparece e some 2</div>
  <div class="minhaDivo" style="display: none">Div que aparece e some 2</div>
</div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.