I can not close div using hide jquery

Question

I can not close div using hide jquery

Navigation

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

0

I'm starting in jQuery and I created a script in which when I click the div it displays the content. So far so good, but when you click on text close the jquery hide 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

asked by anonymous 13.10.2016 / 16:39

3 answers

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);
    });
});

13.10.2016 / 16:44

0

I've added a few more features to Sampaio's answer, just adjust it to the best effect (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><divid="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>

15.10.2016 / 03:15

MySQL syntax [closed] Disable the CSRF token for laravel 5.2

score 3 · Accepted Answer

I have edited your code a bit and added fadeOut in the click event of the .fechar class

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