Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #471786

    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

    #472259

    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

    #472628

    Pretty neat. Thanks !

    #472897

    Hey!

    Glad we could help :)

    Best regards,
    Rikard

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Expandable Text Block ?’ is closed to new replies.