Is it possible to have more than one span/show more code per page?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I want to have lots of show more and show less html codes on my website; I want that page to have lots of pieces of text that expand after clicked.

I have the codes for them, but even after editing some of the html names inside the text widget, it still doesn't work if I make multiple span codes in the same page. Is there a way I can do this?

I'm sorry if I can't make you understand, I don't really know how to explain, but ask questions if you are confused on a particular part.
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes

Posted 7 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Sajid-M,

Please can you post your URL and the page where you're trying to set this up?
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Yes, I haven't added the span codes on all of them yet, but on the 'I don't have an email address or I'm not prepared to use mine.' it expands to a former step.

I want each question to expand and show the details - the bullet points - this will be helpful so that people don't get so much text when they first arrive, but can read the details if they want.

Thanks, here's the page with the spans I want, I also want them with all the other pages in Get Started, but I can fix those later if I know how to fix this:

http://yourfirstwebsite.yolasite.com/...
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Sajid-M,
Thanks for sharing this information. I will be passing along your reply to Sanja who will follow up with you the next time she comes online. Thanks again!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Sajid-M,

I've attached a screenshot of what I see when I click on "I don't have an email address or I'm not prepared to use mine." Please let me know if this is correct? Also, where did you find this code?

Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
Hello Sanja,

Yes, that is exactly what it looks like when you click on 'I don't have an email address or I'm not prepared to use mine'.

And also, I got the code for this, off Nathan in this topic:
http://forum.yola.com/yola/topics/how...
I edited it and made it to what is in the picture you gave, and in the homepage where it says [show more] and [show less]. This is the code he initially gave me:


<p id="already-here-p">

Your text that is already showing can be here.

<a href="#" id="show-more-link" onclick="document.getElementById('extend-section').style.display='block'; this.style.visibility='hidden'; return false;">[show more]</a>

</p>

<div id="extend-section" style="display:none;">

<p>

First paragraph to show when "show more" link is clicked.

</p>

<p>

Second paragraph to show when "show more" link is clicked.

</p>

<br />

<a href="#" onclick="document.getElementById('extend-section').style.display='none'; document.getElementById('already-here-p').style.display='block'; document.getElementById('show-more-link').style.visibility='visible'; return false;">[show less]</a>
</div>


My main problem was that I couldn't add more than one of those on each page, as if you clicked on one of them, they all did the same, opening and closing.
I even tried changing the names in the code above proportionately like in the brackets ('show-more-link') and in other places, but there was no effect, the ystill worked, but not separately.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Sajid-M,

I suggest asking this question on the thread where you got the code from. They would be quite familiar with the code and will likely be able to tell you how to set this up so that you can have more than 1 on a page.
Photo of Sajid-M

Sajid-M

  • 119 Posts
  • 2 Reply Likes
I have requested and received the code and now it works, thanks for your replies.