Jump to content
catpage

Collapse content with Bootstrap

Recommended Posts

catpage    1
catpage

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
catpage    1
catpage

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
catpage    1
catpage

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
catpage    1
catpage

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
catpage    1
catpage

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
catpage    1
catpage

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

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


  • Similar Content

    • John Olsson
      By John Olsson+
      We're often working with ACF (https://www.advancedcustomfields.com/) that's great for user experience in the backend, 'cause we don't want out clients to be in the editor to much.
      So we want to be able to use shortcodes in the editor fields, regardless of section, THIS WOULD BE SO GREAT. Is there a way to fix this, it should open up som much more functionality.
      In ACF, the shortcode is for example: 
      [acf field="field_name"] ...for example, I want to att field_names value to display in a section, i understand I can make it in embed and so, but I want it in titles and options, the whole range.
      I know I can build my own sections, that we've done, but it's not very effective, and thats what PL5 is about.
      Any ideas on this, can Pagelines take this in the core? I guessing there are more than just ACF out there who can use this.

    • jojoking
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
    • bnapoli
      By bnapoli+
      On my site www.anewbeginning.com the "toggle" function mysteriously stopped working.  I have tried all browsers, tried disabling plugins, removing all the relevant CSS but still cant understand why it isn't working.
      The toggle is placed on this page: http://anewbeginning.com/?page_id=15965 and http://anewbeginning.com/?page_id=10779 but it does not display.
      On my other Platform5 websites, that exact code works fine: see here http://4aa.d11.myftpupload.com/?page_id=123
      Code is the same. Please help, thank you!
    • ppotent
      By ppotent
      Any chance of a pagelines table plug-in coming? I know that the use of short codes and bootstrap can achieve this, but I can't seem to find any easy/visual editor way of doing this. There are table plug-ins around for wordpress, but honestly, they are pretty clunky. I'd pay for a tables plug-in, given how much I would use tables if I could.
       
       
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi.
      I need a shortcode activate a popup windows with contact form. It is possible without code?
      Link: https://www.udf.org.br/lancamentos/curso-mulher-que-prospera/
      Button: FAÇA SUA INSCRIÇÃO.
      Tks
×