When I was writing my Résumé page, I was faced with the image of long pages of text, text and more text, especially for the many job positions I held in my career. I wanted something that would limit that text yet still make it available on the same page, particularly to web search engines. Since this is a WordPress-based website and I was positioning myself as a WordPress developer, the natural solution would be to use the WordPress functionality of a shortcode.
I examined several WordPress plugins in the repository that provided the facility to include ‘spoiler’ information, essentially showing or hiding a block of text based on clicking an associated link, but I was not satisfied with the way they looked or the code I saw underneath the hood. Therefore, I resolved to write my own. (Knowing me, I probably should have just skipped the research and went immediately on to writing the plugin myself.)
The initial effort took only a couple of hours of planning (including dinner), research, authoring and testing to complete. It drew upon the jQuery functionality used in the Site Map page (as described here) which toggles between the indicator characters ► (show) and ▼ (hide) and the associated text block when the link is clicked. It worked exactly as planned but once I looked over the the number of times it was used, I realized that something needed to be added. Clicking on each link to show or hide all the text blocks would be so very annoyingly tiresome, so I decided to add the ability to show or hide all or some of the text blocks at once.
Adding the functionality to show or hide all text blocks and change the associated indicator characters accordingly within the page would be easy to do using the .toggle() function, except for the fact that some text blocks might already be toggled and would have to maintain their display state or else text blocks would be closed when the intent was to keep them open, and vice versa. That meant I had to explicitly show or hide the indicator characters and the associated text blocks, and do so in an alternating form without resorting to modifying the parent link. I resorted to checking the display status of the indicator characters of the parent link to determine the proper action: when the ‘show’ character ► was displayed, that meant associated text blocks were hidden and needed to be shown and the indicator characters (including the character associated with the parent link) were to be set to ‘hide’, and vice versa. The parent and children indicator characters and children text blocks were defined using a class parameter to facilitate the selection using the jQuery .find() functionality.
However, since the information was displayed in sections, I also decided to adapt the overall show and hide functionality to show or hide text blocks only in a particular section. The same limitations applied as for showing or hiding all text blocks, but limited only to a given section. This required an additional optional parameter for the tt shortcode to distinguish between sections. It also required some way to pass the section identifier to the jQuery function so that only the desired section would be shown or hidden. The latter was done by assigning the “id” parameter of the link statement to the section identifier, which was in turn retrieved by the mapped jQuery function and used to determine which indicator characters and text blocks were to be shown or displayed.
Personal Links