I cannot close div using IDE jquery

Asked

Viewed 276 times

0

I’m starting in jQuery and created a script in which when I click the div displays the content. So far so good, but when you click on text close jquery’s IDE is not working.

jQuery(function(){
     //jQuery('#showall').click(function(){
       //    jQuery('.targetDiv').show();
    //});
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).show(500).fadeIn();
          //Query('.fechar').hide(500).fadeIn();
    });
    jQuery('.fechar').click(function(){ 
        jQuery('#div'+$(this).attr('target')).hide(500);
    });
    //$('.fechar').click(function(){
     // $(".targetDiv").slideToggle();
   // });
});

The script in Jsfinddle

javascript jquery

  • Dude, either you wear Id-show, or you fade-fadeOut, but better is . fadeToggle(), on it You do not need to validate whether the business is hidden or not, the function itself already does that. One more thing, use "$" instead of "jQuery" and ". on('click',Function()" instead of . click(Function().

  • thanks for the tip. Just takes away a doubt, pq use on('click',Function()" instead of . click(Function()?

  • In fact I don’t know for sure, but I remember that whenever I did this I got in a fight with kkkkk. But in the documentation you write . click is a "shortcut" of the on function. ('click'

3 answers

3


I edited your code a little bit and added a fadeOut at the event click class .fechar

$(document).ready(function() {

        $('.showSingle').click(function(){
              $('.targetDiv').hide();
              $('#div'+$(this).attr('target')).show(500).fadeIn();
        });
        
        $('.fechar').click(function(){ 
              $('.targetDiv').fadeOut(500);
        });

});
.targetDiv{display:none;}
.fechar{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="targetDiv">Lorum Ipsum1 <span class="fechar">fechar</span></div>
<div id="div2" class="targetDiv">Lorum Ipsum2 <span class="fechar">fechar</span></div>
<div id="div3" class="targetDiv">Lorum Ipsum3 <span class="fechar">fechar</span></div>
<div id="div4" class="targetDiv">Lorum Ipsum4 <span class="fechar">fechar</span></div>


<div class="buttons">

<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>
</div>

  • Thank you so much for this ball show, thank you so much. I was just missing.

  • Forget to mark as Best Answer, to help the beggar of repu kkkkkkkkkkkk

0

I increased the response of Sampaio with some more features, just adjust for the effect you think best (fade, slide or show/Hide) 

  $('.showSingle').click(function() {
    var $target = $('#div' + $(this).attr('target'));
    if ($target.is(':visible')) {
      $target.hide(500);
      return false;
    }
    var t = 0;
    if ($('.targetDiv').is(':visible')) {
      $('.targetDiv').hide(500);
      t = 500;
    }
    $target.delay(t).show(500);
  });

  $('.fechar').click(function() {
    $('.targetDiv').hide(500);
  });
.targetDiv {
  display: none;
}
.fechar {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="targetDiv">Lorum Ipsum1 <span class="fechar">fechar</span>
</div>
<div id="div2" class="targetDiv">Lorum Ipsum2 <span class="fechar">fechar</span>
</div>
<div id="div3" class="targetDiv">Lorum Ipsum3 <span class="fechar">fechar</span>
</div>
<div id="div4" class="targetDiv">Lorum Ipsum4 <span class="fechar">fechar</span>
</div>


<div class="buttons">

  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</div>

0

jQuery(function(){
    jQuery('.showSingle').on('click',function(){
        jQuery('.targetDiv').hide();
        jQuery('#div'+$(this).attr('target')).fadeIn(500);

    });
    jQuery('.fechar').on('click',function(){ 
        jQuery('#div'+$(this).attr('target')).fadeOut(500);
    });
});

  • Oops thanks for helping me, but it’s not spinning no

Browser other questions tagged javascript jquery

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