manually show and hide content

/manually show and hide content

This is the short version of the article

The code for creating the situation above

<button class=”ifso-changer version2 style=”display: none;” data-show=”version1″ data-hide=”version2″>Back to the short version</button><button class=”ifso-changer version1” data-show=”long” data-hide=”short”>Read a long version of the article</button>
<div class=”short”>This is the short version of the article</div>
<div class=”long” style=”display: none;”>This is the long version of the article</div>

Exlanation:
Any HTML element can turn into a button that will show and hide content. To do so:
1. Add the class ifso-changer” (class=”ifso-changer”) to the element –
 This will define the element as a changer button
2. Select which elements you want the changer button to show or hide –
Use data-show=”class-name” to show elements, and data-hide=”class-name” to hide elements.
Example:
<button class=”ifso-changer” style=”display: none;” data-show=”short” data-hide=”long”>Back to the short version</button><button class=”bc2 short” data-show=”long” data-hide=”short”>Read a long version of the article</button>
<div class=”short”>This is the short version of the article</div>
<div class=”long” style=”display: none;”>This is the long version of the article</div>
2018-11-23T21:37:24+03:00