Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #230278

    Hi,
    I have a question about my icon list. I would like to have some text on each item in my list that you need to click to get all text. Like having a a toogle in the icon list. I don’t want the user to go to another page to read more.

    I tried to use <a onclick=" hiddenTxt.style.visibility = 'visible';">More.</a> <div id="hiddenTxt">the hidden text here</div> without success.

    Is this possible?

    #230468

    Hi Ahnell!

    You can add something like this on icon list content:

    <a class="show-content" href="#">Click here</a>
    <span class="hide-content">List Content goes here</span>
    

    Then edit js > avia.js, find this code:

    (function($)
    {
        "use strict";
    
        $(document).ready(function()
        {

    Below, add this code:

    $( ".show-content" ).click(function() {
    	  $( ".hide-content" ).show( "fast", function() {
    		// Animation complete.
    	  });
    	});

    Add this on Quick CSS:

    .hide-content {
    	display: none;
    }

    When you click on the show-content link, it will show the content.

    Best regards,
    Ismael

    #582840

    Thank´s Ismael,

    that works on my side. but the “#” link sent the user to the first line of the page. Is there a easier solution than putting a anchor for every list-item?

    Thanks for your help!
    Tobias

    #583713

    Hi!

    You can remove “href” attribute and add following code to Quick CSS in Enfold theme options under General Styling tab

    .show-content { cursor: pointer; }

    Best regards,
    Yigit

    #586898

    Thank you very much Yigit! That works!

    Another Question: Is there a solution to hide the content again?

    Maybe:

    <a class="less-content" href="#">Show less</a>
    <span class="hide-content">List Content goes here</span>

    And the js:

    $( ".less-content" ).click(function() {
    	  $( ".hide-content" ).hide( "fast", function() {
    		// Animation complete.
    	  });
    	});
    • This reply was modified 8 years, 1 month ago by Tobias.
    #588083

    Yes – the solution works on our site!

    #588747

    Hi,

    Great, glad you got it working and thanks for sharing :-)

    Regards,
    Rikard

    #750893

    Hello,
    This is working perfectly on edge browser but it doesn’t work with Firefox or Chrome browser. I see my read more link but nothing appear when I click on this link.
    Best regards,
    Lucie

    #753428

    Hi,

    Could you please provide a link to the page with the issue? And if possible, please create a new thread with the url to the site and the login credentials.

    Best regards,
    Ismael

    #760118

    Hello Ismael,

    FinallyI used a WordPress plugin WP-ShowHide and it works perfectly fine and do what I want.

    Best regards
    Lucie

    #760418

    Hey!

    Awesome! Let us know if you need anything else. :)

    Cheers!
    Ismael

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Show more text on click’ is closed to new replies.