How can I occupy JavaScript collapse repeatedly?

Question

How can I occupy JavaScript collapse repeatedly?

Navigation

#1 by (1 votes)

2

I have a problem with this function since it does not allow me to use it more than twice, that is to say the button if it appears in all my options but when pressing another button only the information of the first one is moved, I am very new programming and it still does not I understand a lot JavaScript , I would appreciate your help.

<div class="hgroup">
   <h4>Neumología</h4>
   <!--<p>Dr. Avis Stankovic</p> -->
</div>
<button type="button" class="btn btn-xs btn-primary" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-collapse-down"></span> Open
</button>   
<div id="demo" class="collapse">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
</div>

<script> 
$(document).ready(function() {
    $("#demo").on("hide.bs.collapse", function() {
        $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
    });
    $("#demo").on("show.bs.collapse", function() {
        $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
    });
});
</script>
</div>

javascript html css

asked by Vinissa Carballo 17.05.2017 в 18:38

source

1 answer

How to fill an array from another activity? Problems with passing parameters with GET in Volley [closed]

score 1 · Accepted Answer

Welcome to SOF, the problem you have is always point to the first, when you execute a method remember that when you use the object this you refer to the current object based on that defición it is possible to do this:

$(function(){ $('.control-colapse').click(function(){ $(this).parent().find('.collapse').toggle(); }); })

I'll give you an example so you can adapt it to your code.

$(function(){
	$('.control-colapse').click(function(){
  	$(this).parent().find('.collapse').toggle();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-group">
  <div class="hgroup">
   <h4>Neumología</h4>
   <!--<p>Dr. Avis Stankovic</p> -->
  </div>
  <button type="button" class="btn btn-xs btn-primary control-colapse" data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-collapse-down"></span> Open
  </button>   
  <div id="demo" class="collapse">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
  </div>
</div>

<div class="main-group">
  <div class="hgroup">
   <h4>DIV 1</h4>
   <!--<p>Dr. Avis Stankovic</p> -->
  </div>
  <button type="button" class="btn btn-xs btn-primary control-colapse" data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-collapse-down"></span> Open
  </button>   
  <div id="demo" class="collapse">
     DIV 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
  </div>
</div>

<div class="main-group">
  <div class="hgroup">
   <h4>DIV 2</h4>
   <!--<p>Dr. Avis Stankovic</p> -->
  </div>
  <button type="button" class="btn btn-xs btn-primary control-colapse" data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-collapse-down"></span> Open
  </button>   
  <div id="demo" class="collapse">
     DIV 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
  </div>
</div>

<div class="main-group">
  <div class="hgroup">
   <h4>DIV 3</h4>
   <!--<p>Dr. Avis Stankovic</p> -->
  </div>
  <button type="button" class="btn btn-xs btn-primary control-colapse" data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-collapse-down"></span> Open
  </button>   
  <div id="demo" class="collapse">
     DIV 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
  </div>
</div>

Good luck!