Hide / Show in divs according to subclasses

Question

Hide / Show in divs according to subclasses

Navigation

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

0

I'm trying to make a code that shows and hides some divs in the click, I tried to use css to help me, but I could not. By the below logic in the click of the "topic" it removes the display class from all items, and adds to the clicked class the display item, so in css for having class entrega.topic.exibir .conteudo1 with display:block; was to show this content no? Or I'm doing something wrong.

html

<section class="central">
   <nav>
      <ul>
          <li><a class="icon-entrega"><span class="icon ic entrega topic"><p>Entregas</p></span></a></li>
          <li><a class="icon-gift"><span class="icon ic icon-gift topic"><p>Compras</p></span></a></li>
          <li><a class="icon-prod-flor"><span class="icon ic prod-flor topic"><p>Produtos</p></span></a></li>
          <li> <a class="icon-lock"><span class="icon ic lock topic"><p>Segurança</p></span></a></li>
      </ul>
   </nav>
</section>

<section class="blc-ca">
   <div class="conteudo1"></div>
   <div class="conteudo2"></div>
   <div class="conteudo3"></div>
   <div class="conteudo4"></div>
</section>

jQuery

    $j(document).on('click','.topic',function(){
    $j('.topic').removeClass('exibir');
    $j(this).addClass('exibir');
});

Css

section.blc-ca div {
display:none;
}

.entrega.topic.exibir .conteudo1 {
display: block;
}

.icon-gift.topic.exibir .conteudo2 {
display: block;
}

.prod-flor.topic.exibir .conteudo3 {
display: block;
}

.lock.topic.exibir .conteudo4 {
display: block;
}

html jquery css

asked by anonymous 03.10.2017 / 20:58

2 answers

3

Could do so ..

$('nav ul li').on('click', function(){
  var div = $(this).attr('data-div')

  $('.blc-ca div').addClass('hidden')
  $('.'+div).removeClass('hidden')
})

.hidden{
  display: none
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  <section class="central">
   <nav>
      <ul>
          <li data-div="conteudo1"><a class="icon-entrega"><span class="icon ic entrega topic"><p>Entregas</p></span></a></li>
          <li data-div="conteudo2"><a class="icon-gift"><span class="icon ic icon-gift topic"><p>Compras</p></span></a></li>
          <li data-div="conteudo3"><a class="icon-prod-flor"><span class="icon ic prod-flor topic"><p>Produtos</p></span></a></li>
          <li data-div="conteudo4"> <a class="icon-lock"><span class="icon ic lock topic"><p>Segurança</p></span></a></li>
      </ul>
   </nav>
</section>

<section class="blc-ca">
   <div class="conteudo1">1</div>
   <div class="conteudo2 hidden">2</div>
   <div class="conteudo3 hidden">3</div>
   <div class="conteudo4 hidden">4</div>
</section>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</body>
</html>

03.10.2017 / 21:14

Change elseif code to switch case Add values returned from while

score 3 · Accepted Answer

The problem is that you are trying to apply class exibir to topic s, when you want to display <div> conteudo that does not have topic class. However Jquery already provides very simple functions for showing or hiding elements, which are show and hide respectively.

Using these could do so:

$(document).on('click', '.topic', function() {
  let posicao = $(this).index(".topic"); //descobrir a posição do tópico clicado
  $('.blc-ca div').hide(); //esconder todos os conteudos
  $('.blc-ca .conteudo' + (posicao+1)).show(); //mostrar o correspondente ao clicado
});

section.blc-ca div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><sectionclass="central">
  <nav>
    <ul>
      <li><a class="icon-entrega"><span class="icon ic entrega topic"><p>Entregas</p></span></a></li>
      <li><a class="icon-gift"><span class="icon ic icon-gift topic"><p>Compras</p></span></a></li>
      <li><a class="icon-prod-flor"><span class="icon ic prod-flor topic"><p>Produtos</p></span></a></li>
      <li> <a class="icon-lock"><span class="icon ic lock topic"><p>Segurança</p></span></a></li>
    </ul>
  </nav>
</section>

<section class="blc-ca">
  <div class="conteudo1">conteudo div1</div>
  <div class="conteudo2">conteudo div2</div>
  <div class="conteudo3">conteudo div3</div>
  <div class="conteudo4">conteudo div4</div>
</section>

Note that neither the exibir class was required, which by the way also did not put the question.