Simple Course Creator List Toggle Effects

If you take a look at one of the posts from the How to Build a WordPress Theme course, you’ll see my Simple Course Creator plugin in action.

course-toggle-smallClick the “Full Course” link to see the course list exposed. You’ll also notice the arrow icon originally pointing down and then rotating itself 180 degrees to point back up once the course list is exposed.

This icon and its behavior are not part of the plugin. So here’s the code it takes to make that happen.

It is assumed that your theme already has some type of icon support installed. I use Font Awesome on BWPY and that’s what I’ll use in this code snippet.

scc_after_toggle Hook

Simple Course Creator comes packed with hooks. One of them allows you to insert content after the course toggle link right in your theme’s own functions file. Here’s the code needed to make that happen.

// course toggle icon
function course_toggle_icon() {
	echo ' <i class="fa fa-arrow-circle-down"></i>';
}
add_action('scc_after_toggle','course_toggle_icon');

If you have Font Awesome installed, you’re done. If you’re not using Font Awesome, simply replace the i element with something of your own.

CSS3 Rotate Based On Temporary Class

There’s no need to override the CSS file for this. You can just write the CSS in your own theme stylesheet. Either way is fine, though.

With that icon in place, assuming it’s similar to my down arrow, the goal is to make the arrow point up when the post list is expanded, considering clicking the link again will close the container.

To do that, we’ll take advantage of Simple Course Creator’s default behavior of adding the class scc-opened to the full course link that is only implemented when the container is expanded.

So with that temporary class in place, we can create a CSS selector that targets the icon when it’s a child of that class.

.scc-opened i {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
}

With the font icon arrow originally pointing down, represented by the i in my CSS, it will rotate 180 degrees (to point up) when it is a descendant of the temporary .scc-opened class.

When the link is clicked again, our temporary class will go away and the CSS selector will no longer apply to the icon, effectively rotating it back to its original position. Too easy.

Use this temporary class and the ability to override templates to do all kinds of stuff to your copy of Simple Course Creator.

Leave a Reply

Your email address will not be published. Required fields are marked *

*