I’m looking for a way to expand some text. An example is having a paragraph followed by a link. When the user clicks on the link, I don’t want to go another page, but simply expand the area to show the remaining text. Any way to do this ? An example below;
Below would be the text block
In, cappuccino kopi-luwak frappuccino, strong decaffeinated cup spoon aromatic saucer whipped. Aroma, macchiato, caffeine caramelization crema, strong plunger pot sit americano french press percolator.
Et coffee, white robusta ut americano trifecta lungo. Grinder, cappuccino, single origin, barista aged grounds barista single shot mocha galão cortado espresso.
Learn more… <– This is the link but instead of going to another page, it simple expands the area for more text
Hey bibbitybop!
Thank you for using Enfold.
You can add something like this in a text block:
In, cappuccino kopi-luwak frappuccino, strong decaffeinated cup spoon aromatic saucer whipped. Aroma, macchiato, caffeine caramelization crema, strong plunger pot sit americano french press percolator.
Et coffee, white robusta ut americano trifecta lungo. Grinder, cappuccino, single origin, barista aged grounds barista single shot mocha galão cortado espresso.
<a class="click-learn-more" href="#">Learn more…</a>
<span class="learn-this">MORE AMAZING CONTENT</span>
Use this in the functions.php file to create a toggle:
add_action('wp_footer', 'ava_custom_script', 10);
function ava_custom_script(){
?>
<script>
(function($) {
$('.click-learn-more').on('click', function() {
$('.learn-this').toggle();
});
}(jQuery));
</script>
<?php
}
Don’t forget to add this in the Quick CSS field:
.learn-this { display: none; }
Cheers!
Ismael
Pretty neat. Thanks !