Wow @PeteSharp, thanks so much for your support!!! I have to attend an event this weekend, but I’ll try out your solution when I get back next week. Take care. @pruthe
Hi again @PeteSharp,
I finally had a chance to try your accordion toggle feature and the basic code is working well for me. The only issue I’m having is with the switch code. Since I have multiple accordions on the same page, the switch code seems to only work for one of the accordions. Is there some way to make the switch code work for each unique accordion?
Again, thanks so much for your support. 
pruthe (Paul)
Hi @pruthe
You can do this, probably the smart way is to grab all the accordion IDs, and run a loop. But a quick way if you only have a few Accordions is too add their IDs in the code. (obviously your accordion IDs will be different)
eg.
This
$('#accordion-32374 .collapse').removeAttr("data-parent");Becomes this for adding an accordion with an ID called #accordion-37044…
$('#accordion-32374 .collapse, #accordion-37044 .collapse').removeAttr("data-parent");If I have some time later, I will try write up a script that will grab any Accordion. But for a few accordions this is probably an acceptable solution.
Hi @PeteSharp,
I tried making your suggested change for allowing a switch above each of multiple accordions, but it does not seem to work. When you get a chance, could you make another sample project file with multiple accordions and a switch above each accordion?
Btw, I have 12 accordions on one page, one for each month of the year. Within each month’s accordion, there are a number of events and when the event link is clicked, more detailed event info is shown. I would like to give the user the option to use the switch button to open all monthly event details at the same time if so desired.
Many thanks in advance.
pruthe
I tested the switch code that @PeteSharp kindly provided, and I am finding it expands everything in a particular accordion. What I would like to do is click on a map and have only one section of an accordion open. Here’s an example page in my site:
https://visionsecurity.jp/dealers.html
You can see the map colors match the two accordions. Right now, the map serves only as a Legend. The user must click on the accordion headers to expand out that section. In addition to that functionality, what I want to add is a clickable map. I know how to create a link map that will scale according to browser window size. The problem is, I don’t know the code required. For example, if the user clicks on the green part of the map, that click should open the corresponding green section of the accordion (not the whole accordion, but only the green section).
Any ideas on how to accomplish this would be greatly appreciated.
Hey @pruthe
Sorry haven’t got back to this, I was away for work for a few days last week and while I was away everything happened pretty fast here in New Zealand with the pandemic. And for like many others around the world, that made a lot of work.
I’ll make something up soon.
Totally understand your situation. We’re in same situation here in Columbus, Ohio, USA. No rush for the code. Only when you can do so.
Stay safe.
pruthe
That was it’s purpose 
You could use very similar code. Strip out all the switch stuff. Add the onclick attribute to the map link to activate the script to target the accordion.
I don’t quite follow.
Your code bric code is this:
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="contentSwitch" onclick="triggerAccordion()">
<label class="custom-control-label" for="contentSwitch"></label>
</div>
Your code for the Footer is this:
<script>
// Trigger
function triggerAccordion() {
var checkBoxTop = document.getElementById("contentSwitch");
if (checkBoxTop.checked == true){
$('#accordion-34328 .collapse').removeAttr("data-parent");
$('#accordion-34328 .collapse').collapse('show');
} else {
$('#accordion-34328 .collapse').attr("data-parent","#accordion");
$('#accordion-34328 .collapse').collapse('hide');
}
}
</script>
Applying the onclick=“triggerAccordion()” to my map will only do the same unfortunate thing – expand everything in a particular accordion. And I am unsure what the “switch stuff” is you want me to strip out that would then open only a single part of the accordion, rather than every part.
Again, I have a map. When I click California, I want the California tab of an accordion to reveal itself. If I click Oregon, I want California to close, and only have Oregon open. And of course, I have two accordions on the same page, so I will need to reference those in whatever the final code is.
I’d appreciate your detailed thoughts.
THANK YOU!
You need to turn your map into an image map with selectable regions (unless you have done that already). Those regions trigger very similar code to open the accordions.
That’s a lot of work to get from a community driven forum though.
1 Like
FYI. @pruthe now has a workable solution for his/this problem, if you need something similar see @pruthe 
3 Likes
Hi all,
I was messaging @PeteSharp earlier to discuss my particular accordion problem. He graciously provided me a sample bloc that solved my issues. I’ve attached that bloc for others to peruse. If you’d like to add the ± feature to your accordion (which I also used), please see the earlier posts in this thread.
Thanks again to @PeteSharp for his generous support.
pruthe
Accordion_Toggle_Switch_Groups.bloc (1.4 MB)
Crashes Blocs 3.3.0 guess I better update
This is indeed a great help for styling.
Any chance to change the colour of +/- as the default one is grey?
Greetings to NZ and many thanks to your great contribution 
Super, Thx @Jerry!
Looks like it has an effect on paragraph settings, so do I have to give every p a new class?
Hi @pixelwork, if you want to apply a color just to one header and not all simply add a custom class to the link.
1 Like
Hi @pixelwork,
I used @PeteSharp’s accordion toggle switch solution and it worked great on Blocs 3. When I converted my project to Blocs 4, I had to make the following change to the font-family line.
font-family: “Font Awesome 5 Free”;
After making this change, it worked fine for Blocs 4.
Hope this helps.
pruthe
3 Likes
Hey @pruthe,
That´s a very useful hint 
as I am also on Blocs 4 now.
Thank you and stay safe!
Greetings from Cologne
1 Like
Hey @Jerry,
Thank you so much for your help.
I fiddled around a bit and it seems your helpful class is not effecting paragraphs.
So far it all works well thanks to your great help.
Super!
Greetings from Cologne
1 Like