Jump to content
Sign in to follow this  


Recommended Posts



I am working with the accordion feature. When the page loads, the first "accordion" is open. Is there a way to style it so that it is closed on load?


Thanks in advance.

On a side note, I am sad that pagelines will not be at WordCamp Denver this weekend :(

Share this post

Link to post
Share on other sites

Thanks. I had the code from bootstrap, not paglines (ie, i didn't use the pl tags at all). I will make the change, thanks.

Share this post

Link to post
Share on other sites

That seems to work, but using the bootstrap code I was able to place a caret next to the text. Can I somehow do that with this shortcode?

Share this post

Link to post
Share on other sites
James B

Hi there, yeah you can still insert a caret, just enter it inside the text you've wrapped with the shortcodes.

Eg: [pl_accordioncontent name="accordion" number="2" heading="^Title 2"]


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • balfred1345
      By balfred1345
      I'm using El Sue's Accordion plugin  V1.7.4 in DMS2 using WP 4.4.1.
      I've created a set "Jobs2", and selected three accordions for the set. Here's a screen shot: http://screencast.com/t/MXYR9p1QoEAo
      The "accordion set to show" selection box no longer works, and all accordions I've made are showing instead of the set "Jobs2"  You can see this here: http://whub34.webhostinghub.com/~videoh6/cidev2.com/jobs-at-piepho/
      I've deactivated all plugins to see if there was a conflict, and there does not seem to be one, as the accordion selector problem persists even with plugins off. 
      Can you please tell me how to fix this so the "accordion set to show" selector works again?
    • lmillslagle
      By lmillslagle
      Hi, I'm using the accordion shortcode on this page: http://actonline.org/releases/
      And it works well for the first ten items and item 20, but it won't open 11-19.
      I checked the shortcodes and the non-working ones match the working ones (aside from the number and heading). I tried deactivating all plugins and still no dice. Any idea what the issue is?
    • jharri74
      By jharri74
      Hello, is there a way to add a class to an accordion heading? I've read posts that say a unique class is added to each accordion heading of an accordion but I don't see that when i inspect the element in chrome or in firebug. I'm trying to duplicate this (see attached) where each section (eg: main courses) shows the list items and prices of each item within. Here's my current page:
    • h0bd0b1in
      By h0bd0b1in
      I'm fairly new to the whole web design and CSS thing. I dabbled in HTML back in the day (HTML 3 I think) but I'm looking to get back in to it in earnest. I've managed so far to style my site to a certain extent but I've hit a little bit of a snag.
      I have accordions embedded within an iTab on one of my pages and, while I've managed to successfully alter the background colours of the toggles and content panes, I'm struggling to alter the colour of the text within the accordion toggles. At the moment, they are using the default base colour for my site, which is what I want links to use in every other regard, but in this instance that colour clashes with the toggles background colour.
      I attempted to inject the colour attribute using CSS by referencing the .accordion-toggle class but without success. How would I go about changing this colour?
    • caspersjan
      By caspersjan
      Dear Pagelines team,
      I have been using the PL Accordion Shortcode and it has worked efficiently and beautifully. But a problem has arisen on RTL pages: The space between the accordioncontent bars increases considerably. I cannot see any difference in the HTML and can't find anything in CSS or anywhere else that might cause this. I'd be most grateful if you could cast your more experienced eye on this. Here are two pages:
      LTR page: http://animatinglibraries.com/?activities=space-race
      RTL page: http://animatinglibraries.com/?activities=space-race-2&lang=ar
      Can you see what might be the case? It irks me that I don't understand it - and can't prevent it from happening. 
      Thank you for your ongoing assistance - and your patience in the ongoing epic LTR/RTL saga...
      Yours faithfully, Jan.
      P.S.: In case it's helpful, here are the actual HTML portions with the accordion shortcodes for these pages:
      [pl_accordion name="activity1"][pl_accordioncontent name="activity1" class="activity" number="1" heading="INFO" open="no"] [row] [span3] <span style=font-weight:bold;">Group size</span> 11 - 15 <span style=font-weight:bold;">Age</span> Secondary School <span style=font-weight:bold;">Gender</span> Mixed <span style=font-weight:bold;">Profession</span> Pupils [/span3] [span3] <span style=font-weight:bold;">Sessions</span>   <span style=font-weight:bold;">Session duration</span> 1 1/2 hours <span style=font-weight:bold;">Type</span> Introduction <span style=font-weight:bold;">Level</span> Beginner [/span3] [span6] <span style=font-weight:bold;">Report:</span> Breaking the frontiers of space [/span6] [/row] [/pl_accordioncontent] [pl_accordioncontent name="activity1" class="activity" number="2" heading="PHOTOS" open="no"] [row][span6] WORKSHOP IMPRESSIONS </br>[justified_image_grid ids=8079 preset=5 row_height=100 height_deviation=25 prettyphoto_social=no lightbox=colorbox mobile_lightbox=no ][/span6]   [span6] MODELS AND SETS </br>[justified_image_grid ids=8080 preset=5 row_height=100 height_deviation=25 prettyphoto_social=no lightbox=colorbox mobile_lightbox=no ][/span6][/row] [/pl_accordioncontent] [pl_accordioncontent name="activity1" class="activity" number="3" heading="VIDEO" open="no"] No video [/pl_accordioncontent][/pl_accordion]   RTL: [pl_accordion name="activity2"][pl_accordioncontent name="activity2" class="activity" number="4" heading="INFO" open="no"][row][span6] <span style=font-weight:bold;">Report:</span> Breaking the frontiers of space [/span6] [span3] <span style=font-weight:bold;">Sessions</span>   <span style=font-weight:bold;">مدة اللقاءات</span> 1 1/2 hours <span style=font-weight:bold;">نوع الورشة</span> مقدمة <span style=font-weight:bold;">مستوى الورشة</span> Beginner [/span3] [span3] <span style=font-weight:bold;">حجم المجموعة</span> 11 - 15 <span style=font-weight:bold;">الفئة العمرية</span> مدارس ثانوية <span style=font-weight:bold;">الجنس</span> مختلط <span style=font-weight:bold;">المهنة</span> تلاميذ [/span3] [/row] [/pl_accordioncontent] [pl_accordioncontent name="activity2" class="activity" number="5" heading="صو" open="no"] [row] [span6] ر : نماذج ومواقع </br>[justified_image_grid ids=8079 preset=5 row_height=100 height_deviation=25 prettyphoto_social=no lightbox=colorbox mobile_lightbox=no ][/span6] [span6] ر: انطباعات من الورشات </br>[justified_image_grid ids=8080 preset=5 row_height=100 height_deviation=25 prettyphoto_social=no lightbox=colorbox mobile_lightbox=no ] [/span6] [/row] [/pl_accordioncontent] [pl_accordioncontent name="activity2" class="activity" number="6" heading="صو" open="no"] No video [/pl_accordioncontent][/pl_accordion]