• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

[Answered] Easy to read rules and FAQs

negative

Team Member
Administrator
Moderator
+Lifetime VIP+
Contributor
ViP
True Member
Suppliers
+Member+
Registered
#1
Since Wiki is not a *perfect* solution for me
I'd like to know any addon (or HTML code) which can be used to do the following



and have it's own pages like wiki

I'm positive that an HTML code will work for me just fine if I integrate it with my wiki
 
Last edited:
#4
Hey again @negative.

I created this simple example to help you get started, take a look here: JSFiddle or here:
HTML:
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){e.style.display="block"}
else{e.style.display="none"}return true;}
</script>

<a href="javascript:void(0)" role="button" onclick="return toggleMe('open_1')">Some text here!</a>
<div id="open_1" style="display: none;">
Glorious text here!
</div>

<br><br>

<a href="javascript:void(0)" role="button" onclick="return toggleMe('open_2')">Another one!</a>
<div id="open_2" style="display: none;">
Glorious text here!.. Perhaps something more?
</div>
Feel free to continue this discussion, we can develop it even further if you like to.
EDIT://Updated the code and the JSFiddle link.
 
Last edited:

negative

Team Member
Administrator
Moderator
+Lifetime VIP+
Contributor
ViP
True Member
Suppliers
+Member+
Registered
#5
thanks @Caldexi but the it gives one problem in the URL.

refer to the image below

also please don't mind the censor. I just don't want everyone to know about it

 

negative

Team Member
Administrator
Moderator
+Lifetime VIP+
Contributor
ViP
True Member
Suppliers
+Member+
Registered
#7
I updated the code to properly work on Xenforo boards
Works Perfectly. Just two more doubts

-Can I add a bullet to the link text?
-Can I change the color or the link text? Because it seems to be using the global link color

PS: I tried it using in the regular thread with [parsehtml] code and it worked perfectly too
 
#8
Hey again @negative!

I fixed a better syntax for the code and added in the features you requested, as per say here is the new JSFiddle link and the code can also be found below:
HTML:
<style type="text/css">
#wikiLinkList{
color:#ff0000;
}
</style>
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){e.style.display="block"}
else{e.style.display="none"}return true;}
</script>

<ol type="1">
    <li>
        <a id="wikiLinkList" href="javascript:void(0)" role="button" onclick="return toggleMe('open_1')">Some text here!</a>
        <div id="open_1" style="display: none;">
            Glorious text here!
        </div>
    </li>

    <br><br>

    <li>
        <a id="wikiLinkList" href="javascript:void(0)" role="button" onclick="return toggleMe('open_2')">Another one!</a>
        <div id="open_2" style="display: none;">
            Glorious text here!.. Perhaps something more?
        </div>
    </li>
</ol>

If you have any questions or other thoughts then let us know ;)!
 

negative

Team Member
Administrator
Moderator
+Lifetime VIP+
Contributor
ViP
True Member
Suppliers
+Member+
Registered
#9
Awesome :D

the rounded bullets instead of numbers?
 
#10
Hey again @negative.

Yes, that can be done. Simply replace the <ol> with <ul>, like this:
HTML:
<style type="text/css">
#wikiLinkList{
color:#ff0000;
}
</style>
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){e.style.display="block"}
else{e.style.display="none"}return true;}
</script>

<ul style="list-style-type:disc">
    <li>
        <a id="wikiLinkList" href="javascript:void(0)" role="button" onclick="return toggleMe('open_1')">Some text here!</a>
        <div id="open_1" style="display: none;">
            Glorious text here!
        </div>
    </li>

    <br><br>

    <li>
        <a id="wikiLinkList" href="javascript:void(0)" role="button" onclick="return toggleMe('open_2')">Another one!</a>
        <div id="open_2" style="display: none;">
            Glorious text here!.. Perhaps something more?
        </div>
    </li>
</ul>

As usual I uploaded this to JSFiddle/1/. Let us know if you need help with anything else!