Skip Navigation

[Gelöst] 'Extended' collapse

This support ticket is created vor 5 Jahre, 8 Monate. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 6 Antworten, has 2 Stimmen.

Last updated by Ljuba vor 5 Jahre, 8 Monate.

Assisted by: Nigel.

Author
Artikel
#953444

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?

#953560

Nigel
Supporter

Languages: Englisch (English ) Spanisch (Español )

Timezone: Europe/London (GMT+00:00)

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

#953723
001.png

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'?

#955622

Nigel
Supporter

Languages: Englisch (English ) Spanisch (Español )

Timezone: Europe/London (GMT+00:00)

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.

#955629

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.

#955631

Nigel
Supporter

Languages: Englisch (English ) Spanisch (Español )

Timezone: Europe/London (GMT+00:00)

Sorry, but I can only answer questions about Toolset.

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

#955641

OK. No problem. I will look there.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.