Accordian toggle indicator

Thx Jerry,
I can´t work it out in the moment. I wonder how @pruthe made it work.

Traffic in paradise? :joy:

1 Like

Yeah, we’re all on the way to the beach for a rum coconut :cocktail: :coconut: :yum:

I can’t get it to work as well. Off to bed now, will give it another try tomorrow with coffee :coffee:. I’m pretty sure the error is in here:

#accordion-11011 .card-header a:before

EDIT: @PeteSharp, should have finished his first coffee by now. :crazy_face:

1 Like

I’m looking at what’s going on. Will let you know if I find anything. :slight_smile:

2 Likes

Hi again,

It’s necessary to force the Font Awesome icons to be included in the Blocs project. Apparently in my other project I used a Font Awesome icon somewhere. Here’s an updated sample blocs file with a change. I added an icon-heading bric over each accordion and the ± showed up.

Accordion_Toggle_Switch_Groups-icon.bloc (726.2 KB)

Hope this helps. :slight_smile:

pruthe

Update: I used a Facebook icon in my project so that’s why Font Awesome was included.

1 Like

I’m only on my phone. But from memory, yes Blocs won’t include Font Awesome unless you use it. And it doesn’t know you want to use it if your using just code.

1 Like

Yes, I can confim this. It’s only working, if you use an icon with FA 5 Free somewhere on the project.
the code above doesn’t implement the font itself.

@Malachiman this time I’m asking, before trying myself for 4 hours :joy:
How do I apply it to more than 1 accordions on the same page? Do I have to repeat the whole code and change the #accordion-nr.? Or ist there a more simple solution?

@benfluri

Yeah that code was targeting one accordion. The easiest way would be to add a class to all your accordions like

.myaccordion

Call it what ever you want. Then use that class instead of the ID. The Accordion uses cards, so we want to still target them, other wise your CSS will effect cards on your page if you have them.

With that class in place, the CSS will style all of them.

1 Like

genius solution! works perfectly.
one more time, thank you very much!!

Slightly speedier… I replied 3 hours after your post :rofl:

2 Likes

Thanks all,
Yes, with an icon on the page it works.

I would love to try @PeteSharp ´s solution but whereever I placed the class in the code I wasn´t successful. How would the code look like?
In any case - great help :+1:

Hey @pixelwork

This

#accordion-46118 .card-header a[aria-expanded=“false”]:after{
font-family: “Font Awesome 5 Free”;
content: “\f067”
}

Becomes

.myaccordion .card-header a[aria-expanded=“false”]:after{
font-family: “Font Awesome 5 Free”;
content: “\f067”
}

Change the .myaccordion based on what ever classs name you used.

3 Likes

3 hours I could spent on what I‘m good at, meaning Design, instead of code-digging… what I‘m realy bad at :see_no_evil:
Code is so freakin abstract for my brain :crazy_face:
You‘re our guardian-code-angle @PeteSharp
btw love your new videos!

1 Like

Super Pete, :+1:
I made several mistakes when inserting the class.
Now I got it…

I agree with @benfluri ´s words :rofl:

2 Likes

Latest news…
After all your help and attention I have to shorten up my happyness :stuck_out_tongue_winking_eye:
It works well on Safari and - to my surprise - also in Brave.
Firefox and Oprea do not show the +/- (not even placeholders), so does any Android device.

Looks like I have to find a nice compromise :joy:
Anyway - bless you all and great thanks for your support :+1:

1 Like

The ± show up on my Blocs project using Firefox (84.0.2) on MacOS 10.15.7. Also shows up on Firefox on iOS 14.3. I don’t have Opera yet. Also don’t have Android. Maybe someone else can test.

Looks like your punishment for using Firefox :rofl:

It could be related to security features of Firefox? Do you get the same result if the page is hosted?

Smart A… :rofl: :rofl: :rofl:
Sorry, kind of my english balley feeling in resonsing :stuck_out_tongue_winking_eye:
Am a German and have of course no sense of humor!!!
Am using every browser, specially those common ones!

Guess there is a friction -may be a bug as well .

Given up on this point - as it isn`t only Firefox!
Thanks to Down Under :+1: :rofl: :rofl: :rofl:

I haven’t revisited this for a long time. Maybe sometime soon I’ll take another look and refine it.

I can confirm as being Dutch :rofl: :rofl: :joy: :joy:

1 Like

Can´t get it to work (tryed every submitted code by this great Forum)
HELP please - Accordion is very importand to me!