Jump to content


Photo
- - - - -

Collapse content with Bootstrap

bootstrap collapse shortcode accordion

Best Answer Rob , 11 June 2013 - 08:05 PM

Apparently, I wasn't far off, but had the wrong format.  See this link for your solution: http://www.pagelines...ns-on-one-page/

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 11 June 2013 - 12:48 PM

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:

Please Login or Register to see this Hidden Content

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!



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 June 2013 - 01:56 PM

Hi,

 

Yes it is possible, but not with the code you have. Please see

Please Login or Register to see this Hidden Content

and look for Accordion.  That's the proper code (an example given there) to create collapsible or accordion effects.



#3 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 11 June 2013 - 02:22 PM

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.



#4 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 11 June 2013 - 02:26 PM

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



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 June 2013 - 02:31 PM

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.



#6 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 11 June 2013 - 02:40 PM

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.

Please Login or Register to see this Hidden Content



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 June 2013 - 02:51 PM

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



#8 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 11 June 2013 - 03:14 PM

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



#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 June 2013 - 08:05 PM   Best Answer

Apparently, I wasn't far off, but had the wrong format.  See this link for your solution:

Please Login or Register to see this Hidden Content



#10 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 11 June 2013 - 08:32 PM

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:

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: bootstrap, collapse, shortcode, accordion