Docs

[michaelxxx]

Hi,

at the moment I use the following shortcode for my accordion:

[accordion id="my-accordion"] [accordion_item title="Unsere Hotelbewertung des Barceló Praha Five auf <img src='http://localhost/wp-content/uploads/bilder/tripadvisor-icon.png' />" parent_id="my-accordion"]

[/accordion_item]

This accordion has the following style:

.x-accordion-group {
    width: 1021px;
    margin: auto;}

This is ok.

Now I like to add a second accordion style with width=100% and a different background colour.

What is the shortcode and css for the second accordion? Is it something like:

[accordion id="my-accordion-2"]....[/accordion_item]

Can you please help me with this?

[Rupok]

Hi there,

You can use inline style to your shortcode. Let’s follow the example here – http://demo.theme.co/integrity-1/shortcodes/accordion/

If you need help on any specific styling then add them first and provide your URL. The clarify what you are trying to achieve.

Thanks!

[michaelxxx]

I develop lokal, so I can´t give you an url

And I know the demo example but I can´t found the answer there.

As I wrote in my post I need 2 different styled accordions. Can you please give me an example
1) what code/option I need to add to the shortcode
2) what style I need to add to my custom css for the second accordion – which should have another style (color, width) then the standard accordion

[Rue Nel]

Hello There,

Thanks for the updates!

1] You need to add an ID to each of your accordion. For example:

....[/accordion_item]
....[/accordion_item]

And then to control the width of each of the accordion, you can use this css:

#my-accordion-1 {
  max-width: 1021px;
  margin: 0 auto;
}

#my-accordion-2 {
  max-width: 100%;
  margin: 0 auto;
}

Please keep in mind that the width of the accordion will still depends on the width on its column container. To fully achieve a fullwidth accordion (the same width as the browser), you must see to it that the section itself is fullwidth. You will need to disable the column container in the row settings.

Hope this helps.

[Author]

Posts