Using CMSE Custom Fields Vertical Shortcodes For Accordion Slides

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 © 2020 CMSE Extension Demonstrations. All Rights Reserved.