Show and hide div

Question

Show and hide div

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (2 votes)
#4 by (2 votes)

1

I need to make a function that when just clicked on the div with the last class is visible and the rest is 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

asked by anonymous 18.11.2016 / 18:32

4 answers

3

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><ahref="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 divs within container
$(this).toggle(...) shows or hides depending on whether the argument passed is true or false
$(this).hasClass(div) checks if element has this class

18.11.2016 / 18:41

3

There are 2 problems with your method:

if it has to be "==", when using a single "=", you are adding value within the condition.

you need to enter the correct element that will loop

In case the div is inside your container:

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

18.11.2016 / 19:04

2

Another way is to use jQuery siblings :

  $('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><aonclick="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>

18.11.2016 / 19:06

Twitter API Doubt Create automatic PHP file [closed]

score 2 · Accepted Answer

I believe that this way will 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><aonclick="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>