Using CMSE Custom Fields Vertical Shortcodes For Accordion Slides

    Though called "accordion", the behavior is vertical slides instead of horizontal. The setup is very simple and preset styling can be applied.

    Slides do not have to be contiguous. They can be placed in any arbitrary area of an article and can be used in any extension, including custom modules.

    The method:

        [ slidetab Title|styleclass]  

           content

        [ /slidetab]  

    Easy Basic Use

        [ slidetab Easy Basic Use]  

          content here

        [ /slidetab] 

    Easily insert the shortcode with the included CMSE Shortcode editor button

    cmse-shortcodes-basic-slide-insert-method.jpg

    Add Style Classes

    Change the style of a single slide just by selecting from the library style classes, or easily add your own. Both element parts of a slide can be styled differently. The parent class for the tab is slidetab and for the content, slidecontent

        [ slidetab Add Style Classes|greentab greencontent] 

          content here

        [ /slidetab]  

    Include other shortcodes

    The [ div] element shortcode is used to create 2 columns, and the [ video] shortcode is used to embed the video player.

    The video player shortcode is in use

    [ video="https://www.youtube.com/watch?v=zWXz6ZnLasw"]
    Click Play


    The Best Known Cheese

    content here

    The New Goat Cheese

    content here


    Use Vertical Slides As Tab Format

    Display vertical slides as tab format by simply enabling slide group wrap and add class maketabs. When this method is used, the group will convert to vertical slide bars when the screen width is reduced.

    The Method

        [ slidegroup|maketabs]

          [ slidetab The Title]

            content

          [ /slidetab]

        [ /slidegroup]

    Insert with the CMSE Shortcode editor button

    cmse-shortcodes-insert-slide-with-grouping.jpg

    The New Goat Rum

    content here


    Content slide plugin flexibility

    The plugin function is not limited to use in CMSE shortcodes, the initializing classes can be used in any element by manual insertion. Example

    An image can serve as a slide tab handle to open a content element in any place of the post.

    <img src="/image.jpg" class="slidetab" /> <img src="/hiddenimage.jpg" class="slidecontent" />

    Click the below image to open the content.

    sample-photo1.jpg

    8f5b9d7b69a75c63b3c0c618ee7ca478.jpg

    about walter

    Demonstration of the content blocking shortcode to restrict parts of page content to registered users only.

    Please login to view this blocked content

     

    he is in the shit now

     

    the world is green

    sometimes its like that

    green

    it can always be dat

    PayPal Cart Shortcode

    • The Big Coop

      Some coops are just bigger and better

      Price: $500

    facebook page shortcode

    The page is being displayed in a custom module. Done with shortcode [ facebook page="https://www.facebook.com/websitedonshosting/" ]

    twitter shortcode page

    The page is being displayed in a custom module. Easily done with shortcode [ twitter page="https://twitter.com/websitedons" ]

    Article Insert With Shortcode

    Content from a Joomla article is displayed in a custom module. Easily done with shortcode [ article="78" 50|read this]

    The Senate Intelligence committee investigating ...
    read this

    Countdown Shortcode

    The flexible countdown shortcode used in a custom module.

    Mosets Tree

    Copyright © 2019 CMSE Extension Demonstrations. All Rights Reserved.