Change display property with jQuery

Question

Change display property with jQuery

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I want to change the display of% content% to block , as it is clicking and hiding the previously clicked.

How could I do this with jQuery?

.conteudo_1 {
  display: none
}

.conteudo_2 {
  display: none
}

.conteudo_3 {
  display: none
}

<ul>

  <li><a href="">Conteudo 1</a></li>
  <li><a href="">Conteudo 2</a></li>
  <li><a href="">Conteudo 3</a></li>

</ul>

<div class="conteudo_1">
  <p>
    texto conteudo 1
  </p>
</div>

<div class="conteudo_2">
  <p>
    texto conteudo 1
  </p>
</div>

<div class="conteudo_3">
  <p>
    texto conteudo 1
  </p>
</div>

jquery css

asked by anonymous 20.12.2017 / 11:51

2 answers

1

I think you can simplify the code, and still reuse easily

function toggleDiv(conteudo){
  $('.conteudo').hide();
  if(conteudo == 1) {
    $('.conteudo_1').show();
  } else if(conteudo == 2) {
    $('.conteudo_2').show();
  } else if(conteudo == 3) {
    $('.conteudo_3').show();
  } 
}

.conteudo{
  display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><ul><li><ahref="#" onclick="toggleDiv(1)">Conteudo 1</a></li>
<li><a href="#" onclick="toggleDiv(2)">Conteudo 2</a></li>
<li><a href="#" onclick="toggleDiv(3)">Conteudo 3</a></li>
</ul>

<div class="conteudo conteudo_1">
<p>texto conteudo 1</p>
</div>

<div class="conteudo conteudo_2">
<p>texto conteudo 2</p>
</div>

<div class="conteudo conteudo_3">
<p>texto conteudo 3</p>
</div>

20.12.2017 / 12:41

Using the awesome Font icons in Woocommerce? validating only .com.br regex

score 1 · Accepted Answer

Something like this?

function toggleDiv(conteudo){
  $('div.conteudo').removeClass('active');
  if(conteudo == 1){
    $('div.conteudo_1').addClass('active');
  }else if(conteudo == 2){
    $('div.conteudo_2').addClass('active');
  }else if(conteudo == 3){
    $('div.conteudo_3').addClass('active');
  } 
}

.conteudo_1{
  display:none
}
.conteudo_2{
  display:none
}
.conteudo_3{
  display:none
}

.active{
  display:block!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><ul><li><ahref="#" onclick="toggleDiv(1)">Conteudo 1</a></li>
<li><a href="#" onclick="toggleDiv(2)">Conteudo 2</a></li>
<li><a href="#" onclick="toggleDiv(3)">Conteudo 3</a></li>

</ul>

<div class="conteudo conteudo_1">
<p>
texto conteudo 1
</p>
</div>

<div class="conteudo conteudo_2">
<p>
texto conteudo 2
</p>
</div>

<div class="conteudo conteudo_3">
<p>
texto conteudo 3
</p>
</div>

I just created a function that hides all the divs with the class .conteudo and the view to which it was clicked.