[Resolved] 'Extended' collapse

[Author]

Posts

[Ljuba]

Tell us what you are trying to do?

I created Bootstrap - one row (6-3-3) and below one entire row (12). In first row in small columns (3-3) I set 'collapse' link/button. Goal is to get collapsed row as entire row, instead of 1/4 of the page. I think that I set all well. However, issue is with 'toggle' (my JS knowledge is disaster). By click, 'unfolded' rows are shown and hidden, but I think that I need to set it as toggle as if first row is not closed, second appear below first row, instead to replace it.

How should to look JS (I will provide link in private post, if needed)?

<div class="row">
	<div class="col-sm-6">
    	SOME TEXT
  	</div>
	<div class="col-sm-3">
  		<a class="btn btn-link" id="checkout_click" data-toggle="collapse" href="#collapseCheckout" role="button" aria-expanded="false" aria-controls="collapseCheckout">
	        Checkear ahora
  		</a>
  	</div>
	<div class="col-sm-3">
    	<a class="btn btn-danger btn-lg btn-block text-bold" id="booking_click" data-toggle="collapse" href="#collapseBooking" role="button" aria-expanded="false" aria-controls="collapseBooking">
    		Reserva ahora
  		</a>
  	</div>
</div>
<div class="row">
	<div class="col-sm-12">
		<div class="collapse" id="collapseCheckout">
            FIRST ROW CONTENT
        </div>
    </div>
	<div class="col-sm-12">
	    <div class="collapse" id="collapseBooking">
		    SECOND ROW CONTENT
		</div>
  	</div>
</div>

Is there a similar example that we can see?

On my website.

What is the link to your site?

[Nigel]

Hi Ljuba

I copied your markup into a code pen and it seems to work fine, I'm not sure what the issue is.

hidden link

[Ljuba]

When you first click on link, first row appear, and than click on button, second row will appear under first row (see image), instead to replace first row.

So, what JS will set that 'clicks' will keep to do show/hide, but also to do 'toggle'?

[Nigel]

I added the official Bootstrap example from their docs (hidden link) to the same codepen so that you can compare it to yours to help you identify why toggling works with theirs demo but not in yours, which presumably relates to how you split the headers into their own row.

[Ljuba]

Well... You added Accordions and not a 'raw' content launched by two different clicks. So, example is nothing to do with my. Answer is at hidden link but my issue is that I tried couple of combinations and it not works for me (obviously, I don't know well JS). Briefly, 'toggle' must be invoked, but how ..... that was the question.

[Nigel]

Sorry, but I can only answer questions about Toolset.

This is a question about Bootstrap. You could try posting a question on Stack Overflow.

[Ljuba]

OK. No problem. I will look there.