CSS Toggle Content Shortcode Implementation – Part 2

CSS Toggle WP Shortcode

Today’s project is going to be so easy to implement and really fun one. In the last part of tutorial we’ve build the HTML/CSS structure for a css toggle content, but without using of any javascript. We just used a basic input with css styleing. You can check the part 1 of the tutorial here and also a final demo our our css toggle content here.
The great part about this css toggle is that we can pull all of this off using only CSS3 tehniques with minimal inpact on your page load. Before proceding you need to go to the part one of this tutorial and grab all necesary files for this project.

What’s next for CSS toggle content ?

Basically, we’re going to implement that tutorial in a simple wordpress shortcode that will do all the work for us, even will generate a unique ID for our input, but i will explain that later. Read on if you want to make your own shortcode to toggle some awesome content.

Many great wordpress themes has a built in shorcode that help you achive this result but if you want to make your own and simply you dont like their design or the fact that most of them use Javascript you can read on and find out how to make your own css content toggle.

Once again, just to show off, we’re going to perform this all of this magic without a single drop of JavaScript. Let’s get started.

Step 1. CSS Toggle Files

I’ve allready build a test page for this project wich you can find here. There doesn’t need to be much here, just a few basic elements, and a minimal setup for our css toggle. From that page you can grab our css code and html that we will use in this short tutorial.

Step 2. How to add a shortcode in WP

The answer is very simple. We make a function and we name it howerver we want then we add that function with add_shortchode like this:

 // Add Togler Shortcode
function wca_toggler( $atts ) {
	$atts = shortcode_atts(
		array(
			'icon' => '',
                        'title' => 'This is toggler title',
			'content' => 'And of course this is the toggler content.',
			'open' => 'no',
		),
		$atts, 
               'toggler'
	); } add_shortcode( 'toggler', 'wca_toggler' );

Now that we have the basic setup for css toggle content, we also need to make some variables for our title, content, open and maybe a FontAwesome icon. And we need to generate a unique id for every checkbox, so we do that as following:

 

Step 3 – The rezult

Now that you have all code above inserted in that function, right after shortcode atts, your css toggle shortcode is ready and should output something like on my contact page or in our demo, every time you call it.

We call the shortcode like in the example bellow. If you add 'open="yes"' in your shortcode, this will make the css toggle opened by default.

[\toggler icon="fa fa-leaf" title="The title" content="This content" open="yes"]
So, this is it. Hope you liked it and if any questions feel free to ask them using the comment form bellow and if this helped you in any way a share will help me also.