Hide/Show in Ivs according to subclasses

Asked

Viewed 220 times

0

I’m trying to make a code that shows and hides some Ivs in the click, I tried to use css to help me, but I couldn’t. By the logic at the bottom of the "topic" click it removes the display class from all items, and adds to the item clicked the display class, then in the css by having the class entrega.topic.exibir .conteudo1 with display:block; was to show this content no? Or am I 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;
}
jquery html css

2 answers

3


The problem is you’re trying to apply the class exibir to topics, when the ones you want to show are the <div> conteudo who doesn’t have the class topic. However the Jquery already provides very simple functions to show or hide elements, which are the 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>
<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">conteudo div1</div>
  <div class="conteudo2">conteudo div2</div>
  <div class="conteudo3">conteudo div3</div>
  <div class="conteudo4">conteudo div4</div>
</section>

Notice that neither the class exibir was necessary, which also had not put in question.

  • Yes, thank you. I hadn’t thought of that solution

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>

  • Yours is correct too, works and all, only @Isac responded with explanation and all, but thanks!

Browser other questions tagged jquery html css

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