Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 27, 2014 at 10:06 pm #230278
    Ahnell

    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?

    February 28, 2014 at 7:52 am #230468
    Ismael

    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

    February 14, 2016 at 7:03 am #582840
    Tobias

    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

    February 15, 2016 at 7:27 pm #583713
    Yigit

    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

    February 22, 2016 at 7:26 am #586898
    Tobias

    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, 9 months ago by Tobias.
    February 24, 2016 at 1:27 am #588083
    Tobias

    Yes – the solution works on our site!

    February 25, 2016 at 5:34 am #588747
    Rikard

    Hi,

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

    Regards,
    Rikard

    February 23, 2017 at 11:32 am #750893
    lucie_vollerin

    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

    March 1, 2017 at 6:29 am #753428
    Ismael

    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

    March 13, 2017 at 5:31 pm #760118
    lucie_vollerin

    Hello Ismael,

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

    Best regards
    Lucie

    March 14, 2017 at 5:22 am #760418
    Ismael

    Hey!

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

    Cheers!
    Ismael

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