Simple Text Toggle for WordPress

Backstory: I wanted the simplest way possible to show/hide a section of my Portfolio page without using a plugin. Credit goes to this post, but I stripped away the images and unnecessary CSS. If anyone else is looking for the same thing, here are the steps.

1. Add this code to your theme’s functions.php:

// Enqueue Javascript
function javascript_enqueue() {
	wp_enqueue_script(
		'toggle', get_stylesheet_directory_uri() . '/js/toggle.js', array('jquery')
	);
}
add_action( 'wp_enqueue_scripts', 'javascript_enqueue' );

// Toggle Shortcode
function toggle( $atts, $content = null ) {
	extract( shortcode_atts(
	array(
		'title' => 'Click to show/hide...',
	),
	$atts ) );
	return '<p class="trigger"><a href="#">'. $title .'</a></p><div class="toggle_container">' . do_shortcode($content) . '</div>';
}
add_shortcode('toggle', 'toggle');

2. Create a folder called “js” in your theme’s folder (if not already existing), and within that, a file called toggle.js with this code:

jQuery(function($){
    $(document).ready(function(){
        $(".toggle_container").hide();
        $("p.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("normal");
		return false;
	});
    });
});

3. Add this CSS to your stylesheet:

.trigger {
    margin: 0;
}
.toggle_container {
    overflow: hidden;
}

Finally, use the [toggle][/toggle] shortcode within a WordPress post. For example, [toggle]Secret hidden text![/toggle] will look like this:

Click to show/hide...

Secret hidden text!

WordCamp DC Recap

In short, I had a great time! My first shift was videographer, so I got to witness 3 amazing speakers (while keeping an eye on the video recording equipment) — Michelle Schulp, Alexis Findiesen, and Sang-Min Yoon. Some notes I jotted down were to look up Brad Frost and Sketch, and play around more with SVGs.

Next was lunch, so of course I picked the longest line for the DC Empanadas food truck (which was delicious). While waiting I talked to a few people in line with me, and although it was hot, it was nice to be outside. I also had some time before my next shift to check out the venue and sponsor tables.

My second and third shifts were helping to hand out t-shirts and working the registration table. By this time most of the attendees had already checked in and gotten their swag, so it wasn’t as busy as I thought — but was still cool to chat with different people (including fellow volunteers). During some downtime I found out there’s a WordCamp Baltimore this October, so I signed up to volunteer there as well!

#13DaysOfCode and WordCamp

So I’ve been a little quiet, but I blame it on summer, vacations, and trying to enjoy the nice weather! My #100DaysOfCode challenge has unfortunately not been very successful yet, as I started the challenge more than a month ago and I’m only on day 13. But I haven’t quit (I could never quit code) … I just need to find the right rhythm of doing what I need to do everyday, while not staying up past midnight to squeeze the hour in. I have a bad habit of not getting enough sleep, though I guess that applies to 90% of the population.

I’m also stepping out my comfort zone and volunteering at WordCamp DC tomorrow! It’s my first WordCamp, and I’m excited but also slightly nervous that I signed up for too much in one day. I’ll be there for 8-9 hours straight, and while all my shifts sound pretty cool, I hope I’m not exhausted from being “on” the whole time. But we’ll see — after having WordPress on my site since 2004, I want to give back and be more involved in it!

Things I’ve Learned: Pre-freeCodeCamp

Today I’m starting freeCodeCamp and the #100DaysOfCode! I wanted to get this site updated with HTML5, CSS3, and a new layout before then, since HTML/CSS isn’t new code to me. I’ve done that now, but I still learned a lot — should’ve started the 100 days back when all this started on Memorial Day haha. I’ve been wrangling:

  • how to migrate WordPress databases to a new domain/server
  • how HTML5 and CSS3 are different from XHTML
  • how to use icon fonts, specifically Genericons and Social Logos
  • how to make slanted headers/footers with SVGs
  • how to code responsive text
  • how to buy & install a SSL certificate
  • how to use GitHub beyond simply committing updates for work

I almost got sidetracked into WordPress land by wanting to install a local environment to help test themes, but figured I should wait and not do too much at once. Plus, these 2 projects will definitely help with contributing to WordPress in the future.

Visual Power

A funny aside: In the process of updating this site, researching hosts, and browsing Google Fonts, I came across the same picture of Jeremiah on Dreamhost and his site Typewolf. I don’t know him and had never been to either site before, but somehow I recognized his picture in 2 unrelated places:

So Jeremiah, if you ever read this, know that you’re memorable!