Shortcode Options

[iTurtle]

hi there,
i am wondering what the shortcode options at the end of the shortcode pages mean and how to apply them. a screenshotof what i mean (http://demo.theme.co/icon-1/shortcodes/accordion/):
https://www.dropbox.com/s/pcd18ayf4ky6hxl/options.png?dl=0
does that mean there is a way to style directly in the [accordion][/accordion] tags?
or does it refer to styling with separate css styles?
if the latter then what are the ids? what good is the information in the screenshot for?
of course i can always find the style with inspect element and style. but why then this information in the screenshot?
hope you can understand what i am getting at
thanks a lot! kai

[rad]

Hi there,

Thanks for writing in.

They are attributes that you can add to your shortcodes. Examples,

For main accordion wrapper/container

[accordion id="my-accordion" class="my-accordion-class" style="border:1px;"]
[/accordion]

For accordion within the wrapper/container

[accordion_item

 id="accordion_id_for_this_item" 
 class="accordion_class_for_this_item"
 style="border:1px;"
 title="Accordion Title"
 parent_id="my-accordion"
 open="true"

]

Your text here

[/accordion_item] 

The id, class, style are the same in main wrapper/container but it’s only applied to that item. The parent_id is the ID of the wrapper/container which indicates that this item belongs to that group, and grouping it is similar to RADIO button elements where you can only toggle one option at a time. Hence, In accordion, you can only open one item at a time. The open option is to set the current accordion item as active (open upon page load).

And yes, style option is to style it directly, it’s inline style. While the class option is for class name if you don’t wish to use inline styling, and if you wish to use a separate styling.

//Inline Style

<div style="color:blue"></div>

//Separate CSS
<div class="make_me_blue"></div>

<style>
.make_me_blue {
color: blue;
}
</style>

The accordion id and accordion item’s parent_id are important for grouping. You may ignore accordion item’s id, but I recommend adding to in case you need to link something in the future. Like scrolling, anchor, button click bindings, etc.

Thanks!

[iTurtle]

dear rad, wow! thanks a million! that is some great explanation and very helpful for me. i suggest you put this somewhere on your website as an additional info under shortcuts. so that others will benefit greatly, too thanks again! kai

[rad]

You’re most welcome! Sure, we’ll see what we can add to our KB