Disable if for accordions

Coffee Lounge
1

This is so non Wappler related that im sticking it in the Coffee Lounge for anyone that feels like it.

With accordions I sometimes have a situation where i may have a group of 6 of them, and one of them I just want there as a similarly styled spacer, to look pretty but actually do nothing on click.

I know programatically it sounds like a dumb idea, but I have to follow designer files and they want what they want.

I will give you an example of usage, I have a holiday itinerary, and each day in your trip has some details, like where you will be staying and what you will be doing, so the accordion for that day is headed “day 2 - visit the ozarks” and when clicked tells you how you will be learning how to launder drug money, however on the first day there could be no details to give at all, because you are spending the entire day flying to the destination, so that day says “day 1 - fly to the ozarks”

So the question is, can i make day 1 part of the same accordion group so it looks the same, yet tell it to onclick just do nothing?

2

Hi,
Maybe something like adding the following to an onclick event?
javascript:void(0);

3

I was hoping to do the same thing at first but the structure of the accordion cards just has a button with toggles and targets, but no actual href tag or a tag.
I also tried just hiding the cad body itself, which kind of works, but when clicked it still closes the already open tab which i dont want to happen, its almost like i need to think of a way to stick a fake transparent square over it, so then you clicking a blank square, but I could not seem to get that working either. hmm

Here is a sample of the code im working with if it makes it any easier.

<div class="accordion" id="itinAccordion" is="dmx-repeat" dmx-bind:repeat="scViewItinerariesDetail.data.query_itinerary_inner_itinerary">
	<div class="card">
		<div class="card-header" dmx-bind:id="itinAccordion_parent{{$index}}">
			<button class="btn btn-link" type="button" data-toggle="collapse" dmx-bind:data-target="#itinAccordion_child{{$index}}" aria-expanded="true" dmx-bind:aria-controls="child{{$index}}">{{itin_inner_itin_day}} : {{itin_inner_itin_sub_day}}</button>
		</div>
		<div dmx-bind:id="itinAccordion_child{{$index}}" is="dmx-bs4-collapse" class="collapse" dmx-bind:aria-labelledby="itinAccordion_parent{{$index}}" data-parent="#itinAccordion" dmx-bind:show="$index == scViewItinerariesDetail.data.query_itinerary_inner.itin_inner_open_tab.toNumber()">
			<div class="card-body">....
4

Hi,

Do you have a live page i can look at?
Im thinking maybe:

data-toggle=“javascript:void();”

can work?

5

Sadly this is one of the few sites where i do not have an available live version, but i will give that a try and let you know, i think you are on the right track though, because if i remove even 1 letter from the word “collapse” then the accordion stops working.

now i just need to work out how to add that condition of data-toggle="collapse" when blah blah ?

But i think thats the correct approach, thank you

6

You can also disable the bootstrap element by adding the class disabled

like: <button class=“btn btn-link disabled”

It will change the look, but it also tells the user that its not clickable.

I think this way is easier to make dynamic with “toggle class”

1 Like
7

Much easier way to go and cives me easy access to the conditions, I can always override the disabled styling on just elements in that container, so that is a perfect solution and nice and easy to do, thanks again, really appreciate it.

1 Like