The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Spoiler Code for a HTML page

View previous topic View next topic Go down

Solved Spoiler Code for a HTML page

Post by Thistle on January 27th 2017, 12:22 am

Hello, I am trying to create a spoiler for my HTML page. I want it to be really simple, just like FAQ page. I've been trying to search and modify the codes myself, but everything I knew about coding is long forgotten Embarassed I want to have multiple of them on one page if it matters. Thanks in advance.


Last edited by Thistle on January 28th 2017, 10:27 am; edited 1 time in total
avatar
Thistle
New Member

Posts : 14
Reputation : 2
Language : English

http://www.makemysimsreal.com/

Back to top Go down

Solved Re: Spoiler Code for a HTML page

Post by Jadster on January 27th 2017, 12:31 am

Try adding this code @Thistle Smile

Code:
<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';" class="link">[Show]</a><span id="spoiler_id" style="display: none"><a onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';" class="link">[Hide]</a><br>INSERT CONTENT HERE</span>

You can also change where is says [Show] to a different text in that code as well. Very Happy

Cheers,
James
avatar
Jadster
Forum Reviewer
Forum Reviewer

Male Posts : 896
Reputation : 120
Language : English
Location : United States

http://www.adminvortex.com

Back to top Go down

Solved Re: Spoiler Code for a HTML page

Post by Thistle on January 27th 2017, 2:47 am

@Mimikyu, thank you! I've tried inserting two, but only one (the first one) works for me :c
avatar
Thistle
New Member

Posts : 14
Reputation : 2
Language : English

http://www.makemysimsreal.com/

Back to top Go down

Solved Re: Spoiler Code for a HTML page

Post by Jadster on January 27th 2017, 3:03 am

Gotcha @Thistle,
I do apologize that only 1 of those begins to work, I will take a look and give you an update as soon as I can get that fixed!

Cheers,
James
avatar
Jadster
Forum Reviewer
Forum Reviewer

Male Posts : 896
Reputation : 120
Language : English
Location : United States

http://www.adminvortex.com

Back to top Go down

Solved Re: Spoiler Code for a HTML page

Post by Thistle on January 27th 2017, 3:40 am

Mimikyu wrote:Gotcha @Thistle,
I do apologize that only 1 of those begins to work, I will take a look and give you an update as soon as I can get that fixed!

Cheers,
James
Thank you very much! I really liked that script (http://www.bloggersentral.com/2013/03/content-spoiler-with-simple-css3.html) but I wanted the design to be very simple (just like the one you provided) and have the ability to choose names for spoilers.
avatar
Thistle
New Member

Posts : 14
Reputation : 2
Language : English

http://www.makemysimsreal.com/

Back to top Go down

Solved Re: Spoiler Code for a HTML page

Post by SLGray on January 27th 2017, 7:37 am

If you are entering more than one spoiler, you will need to give each one a different ID.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39145
Reputation : 2626
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Spoiler Code for a HTML page

Post by Jadster on January 27th 2017, 7:45 am

@SLGray, I was told that by somebody else and I cannot figure out how to do that? Can you show me if at all possible?
avatar
Jadster
Forum Reviewer
Forum Reviewer

Male Posts : 896
Reputation : 120
Language : English
Location : United States

http://www.adminvortex.com

Back to top Go down

Solved Re: Spoiler Code for a HTML page

Post by SLGray on January 27th 2017, 7:46 am

Is is what the second would look like:
Code:
  <a id="show_id2" onclick="document.getElementById('spoiler_id2').style.display=''; document.getElementById('show_id2').style.display='none';" class="link">[Show]</a><span id="spoiler_id2" style="display: none"><a onclick="document.getElementById('spoiler_id2').style.display='none'; document.getElementById('show_id2').style.display='';" class="link">[Hide]</a><br>INSERT CONTENT HERE</span>


Last edited by SLGray on January 27th 2017, 7:52 am; edited 1 time in total


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39145
Reputation : 2626
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Spoiler Code for a HTML page

Post by Jadster on January 27th 2017, 7:49 am

@SLGray wrote:id="spoiler_id"
id="spoiler_id2"

@SLGray, Thank you! I figured it out!

@Thistle, Try using the code below and seeing if it works.

Code:
<a id="x"
  onclick="document.getElementById('y').style.display='';
            document.getElementById('x').style.display='none';"
  class="link">
  [ShowBlock1]
</a>
<span id="y" style="display: none">
  <a onclick="document.getElementById('y').style.display='none';
              document.getElementById('x').style.display='';"
    class="link">
  [Hide]
  </a>
<br>
INSERT CONTENT HERE
</span>

<a id="show_id"
  onclick="document.getElementById('spoiler_id').style.display='';
            document.getElementById('show_id').style.display='none';"
  class="link">
  [ShowBlock2]
</a>
<span id="spoiler_id" style="display: none">
  <a onclick="document.getElementById('spoiler_id').style.display='none';
              document.getElementById('show_id').style.display='';"
    class="link">
  [Hide]
  </a>
<br>
INSERT CONTENT HERE
</span>

Cheers,
James
avatar
Jadster
Forum Reviewer
Forum Reviewer

Male Posts : 896
Reputation : 120
Language : English
Location : United States

http://www.adminvortex.com

Back to top Go down

Solved Re: Spoiler Code for a HTML page

Post by SLGray on January 27th 2017, 7:53 am

I edited my post.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39145
Reputation : 2626
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Spoiler Code for a HTML page

Post by Thistle on January 28th 2017, 10:27 am

@SLGray @Mimikyu
Hello again, thank you very much for your help. Everything works fine!
avatar
Thistle
New Member

Posts : 14
Reputation : 2
Language : English

http://www.makemysimsreal.com/

Back to top Go down

Solved Re: Spoiler Code for a HTML page

Post by SLGray on January 28th 2017, 11:08 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39145
Reputation : 2626
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum