Archived

This topic is now archived and is closed to further replies.

  • 0

Collapse content with Bootstrap


Question

Posted · Report post

Hi I am looking for an 'accordion' like approach that can be applied to individual sections of page content and work as a shortcode. A full accordion which does have a pagelines shortcode [pl_accordion] is not what I want as it collapses any other open sections and looks as though it does not like being used more than once on a page..

 

It is possible to code this directly calling bootstrap as follows:

<a href="#" data-toggle="collapse" data-target="#demo3">click to reveal text 1</a>
<div id="demo3" class="collapse out">text 1 to reveal contained here!</div>
<br />
<a href="#" data-toggle="collapse" data-target="#demo4">click to reveal text 2</a>
<div id="demo4" class="collapse out">text 2 reveal contained here!</div>

The problem here is that each pairing (target / id) has to be set up by hand and as it's incremented and used HTML it is not sensible to give to end users to maintain. Much better would be a shortcode spproach which just sorted out correctly identifying the content area to expand or collapse and somehow handled incrementing id's in the background. Ideally in a form such as:

 

[pl_collapse title="click to reveal text 1"]

text 1 to reveal contained here!

[/pl_collapse]

 

I see there is a 'collapser' section in the store, but this looks to create custom post types, one per set of content, and offer much more by way of features and sophistication than I need. I am trying to keep all the content on one page!

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

Hi,

 

Yes it is possible, but not with the code you have. Please see http://demo.pagelines.me/tools/ and look for Accordion.  That's the proper code (an example given there) to create collapsible or accordion effects.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob.

 

I can't have made myself clear. I am familiar with the Accordion. It allows one section of content in a group to be open at a time. I need independent sections, each section consisting of a 'title' and 'body'. Click on title to toggle open or close the section without reference to the status of other sections on the page.

Share this post


Link to post
Share on other sites

Posted · Report post

Oh and setting up two accordions each with only one content pair does not seem to work - as this is an approach I have tried

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Sorry if I misunderstood.  If you need that much customization, I think you'll need a pro developer. I've been able to add several accordions to a page, each with a number of panels, without trouble.  I'm unclear what the problem is, but if the content of the individual accordions is different, there should be no issues.

Share this post


Link to post
Share on other sites

Posted · Report post

Ah OK... perhaps there is a conflict with another plugin somwehere... The follwing test to try to get more than one accordion on a page does not work for me as the top one is always the one which toggles to open or close regardless of which is clicked despite having separate names.

[pl_accordion name="acc1"]
[pl_accordioncontent name="acc1" heading="title 1"]
body area 1
[/pl_accordioncontent]
[/pl_accordion]

[pl_accordion name="acc2"]
[pl_accordioncontent name="acc2"  heading="title 2"]
body area 2
[/pl_accordioncontent]
[/pl_accordion]

Share this post


Link to post
Share on other sites

Posted · Report post

Wrap each grouping in [pl_raw]accordion group xx[/pl_raw] and see if that helps break each group.

Share this post


Link to post
Share on other sites

Posted · Report post

No difference when wrapped. The top one is triggered regardless of which is clicked on.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks - I see where I was going wrong with multiple accordions now. They MUST include unique 'number' parameters in the content code. The following works:

[pl_accordion name="acc1"]
[pl_accordioncontent name="acc1" number="11" heading="title 1"]
body area 1
[/pl_accordioncontent]
[/pl_accordion]

[pl_accordion name="acc2"]
[pl_accordioncontent name="acc2" number="12" heading="title 2"]
body area 2
[/pl_accordioncontent]
[/pl_accordion]

Share this post


Link to post
Share on other sites