[Useful shortcodes] Expands

tips & tricks
1

Greetings,

I have created website, where I plan to add my experiments with some shortcodes, that can be used for managing content on the Hugo website. The main goal of this project is creating useful shortcodes, that will be optimized and work fast. I called this project as “Use shortcodes” (a shorthand from “Useful shortcodes”). Today I would like to share the different solutions for implementing the expand elements. The expands can be useful when implementing FAQ, for shortening of the content, etc.
Here is a demo of the project: https://useshortcodes.netlify.com/

Couple of the words about technologies, that were used.
This project is using the hugo-init boilerplate (with some minor changes, just for fast starting the development process), but the shortcode implementations can be moved on other project templates/build systems without any issues. The SASS (SCSS version) and SMACSS approach were used for managing styles. The CommonJs was used for importing the javascript modules. The js code was written without using the JQuery and ES6 syntax (maybe it will be changed in future for using babel).
All code were grouped into modules. As example, for expand shortcode the styles are placed at src/styles/modules/expand/_styles.scss file and js handlers were imported into the app.js (main file for the application) file from the src/styles/modules/expander.js

This project contain two different ways of implementing the expand shortcodes. Both of these options has own pros and cons.

The first shorcode is called pure-expand. It works fast because it uses only the CSS for implementation. But it contain some hack, that creating animation effect when content is displaying. I have used animation for the opacity and padding rules to emulate expanding of the content. It was done, because I don’t want to define explicit (or over tall) height for expand content. The height can be different for different expands. Also this expand uses the .Scratch function (included into Hugo) for generating the components for expand. The results of displaying you can find on the demo website.

The second shortcode is named as expand. It combines the CSS and Javascript approaches. The javascript is needed for adding appropriate CSS classes on the different states of the expand. This approach is more acceptable for controlling the height animation of the content. It uses the transitionend js event listener, that is available starting IE10+. But I think it’s not critical. Besides the implementation contains no additional js libraries, only vanilla js.

For playing with project locally you can apply these commands:

$ git clone https://github.com/serg/use-shortcodes.git
$ cd use-shortcodes
$ npm install
$ npm start

The website will be available in browser by this path http://localhost:1313.

The project repo is available here: https://github.com/serg/use-shortcodes

Please let me know your opinion if these shortcodes can be useful.
Also if you have some remarks/suggestions for current implementation please share.

References:

  1. Hugo .Scratch explained by @regis.
  2. How to implement the CSS expands, see this article.
  3. Vanilla JS mobile friendly version of jQuery.slideToggle from here.
5 Likes