Javascript Toggle
#1 01-06-2011 
This is a neat trick I am using in the postbits here on leefish - a javascript toggle to show/hide the info in the post bit.
Lots of sites have toggles - its easy to do - but I had a few "extra" requirements like:
  • I want the name of my toggle link to change - if the action will show data then the link title is "Show Data" - otherwise the link title is "Hide Data".
  • I want the toggle to work on each independent postbit, rather than toggling all the elements on the page.
  • I don't want to load yet another javascript framework.

We are already loading the jQuery and prototype libraries on leefish, and so I wanted to use either of those. I went with Prototype as I am really struggling with the important bit of renaming the link and getting the div id to be variable. JQuery may be slicker, but the link name was more important than the slide effect.

Step 1 Write the HTML.
You will need a link to click on and a div to open. As I am using the GetElementbyID javascript function then you need to give the divs an id. I used the post bit pid with a 1 tagged on the end.

Hidden Div HTML
The div we want to open is coded as below:
Code:
<div id="post_{$post['pid']}1" align="center" style="display: none;" class="smalltext">
hallo, I was hidden until you clicked :)
</div>

Step 2 Write the Javascript.

The link - the bit we click to get the hidden div to open - is as below:
Code:
<div>
<span class="smalltext" title="Click to show user info">
<a href="javascript:;" onclick="Element.toggle('post_{$post['pid']}1');
($('post_{$post['pid']}1').visible() == false) ? $('post_{$post['pid']}2').update('Show data') : $('post_{$post['pid']}2').update('Hide data');"
id="post_{$post['pid']}2">Show data</a>
</span>
</div>

That's it Smile You can test it on the postbit here on leefish - just click Show User Info

EDIT: If you are already loading scriptaculous then you can give a nice slide effect with the code below for the link text:

Code:
<div>
<span class="smalltext" title="Click to show user info">
<a href="javascript:;" onclick="Effect.toggle('post_{$post['pid']}1', 'appear', { duration: 0.5 });
($('post_{$post['pid']}1').visible() == true) ? $('post_{$post['pid']}2').update('Show Data') : $('post_{$post['pid']}2').update('Hide Data');"
id="post_{$post['pid']}2">Show Data</a>
</span>
</div>
The site don't jive? PRESS F5 Flower

1
#2 19-09-2013 
Hi Lee, I have tried this code, it works but if I use 2 or more code (for a menu, if users click on "show data 1", then can click on "show data 2"), doesn't work.

Sorry, I can't explain better Sad

0
#3 19-09-2013 
Yea, this will only work with a single link. What you want is a toggling menu. I will try and find you some code, but actually jQuery is a lot easier for this Big Grin

1
#4 19-09-2013 
If I use only javascript?

If a user has not javascript on own browser, what he/she see?

0
#5 19-09-2013 
EDIT: try this

http://stackoverflow.com/questions/24470...-prototype

However, be aware that if the user has js disabled then the menu wont open close..

1
#6 19-09-2013 
I have a javascript/non-javascript toggle for an accordion menu...

My accordion menu has javascript open/close with an open close if they don't use it

This is in the Header - and it's js code for the scroll up down.
Code:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">

This is the function also sitting in the header. I've set it up just for the accordion menu -

Code:
function toggleVisibility()
{
    $(this).parent().find("div.accordion-menu").toggle("fast");
    return false;
}

$(document).ready(function()
{
    $("li.amen > a").click(toggleVisibility);
});
</script>

This bit is in the CSS section that will hide stuff if the JS is not used.

Code:
<!----- ACCORDION MENU DEFINITION -------->

.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.accordion li {
    list-style: none;
}
.accordion li > a {
    display: block;
    position: relative;
    margin: 10;
    width: 10em;
    padding: 0 0px 0 20px;
    color: #FFFFFF;
    font: bold 12px/32px Arial, sans-serif;
    text-decoration: none;
    background: #2A8A86;
}
.acc-menu li a {
    color: #FFE249;
    background: #2A8A86;
    border-bottom: 1px solid #2A8A86;
    margin-left:5px;
}
.acc-menu li:last-child a { border: 1px solid #2A8A86; }

.acc-menu li > a span {
    color: #FFE249
    background: transparent;
    border: 1px solid #2A8A86;
}
.acc-menu em {
    position: absolute;
    top: 0;
    left: 1em;
    color: #2A8A86;
    font: normal 10px/32px Arial, sans-serif;
}
.accordion > li:hover > a,
.accordion > li:target > a {
    background: #237370;color: #7DC3C1;
}
.accordion > li:hover > a span,
.accordion > li:target > a span {
    color: #C4E5EA;
    background: #237370;
}
.acc-menu li:hover a { background: #9ED4DC; }
.accordion li > .acc-menu {
    height: 0;
    overflow: hidden;
}

.accordion li:target > .acc-menu {
    height: auto;
}

This final bit is the bit that goes into the body of the html to give the accordion menu. Where the # are, is where individual links can go. As you can see, it's basically just a simple nested list. All the work is done in the CSS and script.

Code:
<!----------- Accordion menu on the Side-bar ---------------------->
<ul class = "smenu">
<ul class="accordion">

    <li id="nun" class="amen"><a href="#nun"><font color=#83DBD2>Navigation -</font></a></li>
    
    <li id="one" class="amen"><a href="#one">Objects - Sets</a>
    <DIV class="accordion-menu">
        <ul class="acc-menu">
        <li><a href="#"><em>></em>Bathroom</a></li>
        <li><a href="#"><em>></em>Bedroom</a></li>
        <li><a href="#"><em>></em>Dining</a></li>
        <li><a href="#"><em>></em>Kitchen</a></li>
        <li><a href="#"><em>></em>Living-room</a></li>
        <li><a href="#"><em>></em>Study</a></li>
        <li><a href="#"><em>></em>Outdoor</a></li>
        <li><a href="#"><em>></em>Downtown</a></li>
        <li><a href="#"><em>></em>Building</a></li>
        <li><a href="#"><em>></em>Other</a></li>
        </ul>
        </DIV>
    </li>

    <li id="two" class="amen"><a href="#two">Objects - Singles</a>
        <DIV class="accordion-menu">
    <ul class="acc-menu">
        <li><a href="#"><em>></em>Art</a></li>
        <li><a href="#"><em>></em>Decorative</a></li>
        <li><a href="#"><em>></em>Seating</a></li>
        <li><a href="#"><em>></em>Hobbies</a></li>
    </ul>
        </DIV>
    </li>

    <li id="three" class="amen"><a href="#three">Clothing</a>
    <DIV class="accordion-menu">
        <ul class="acc-menu">
        <li><a href="#"><em> </em><b>Female</b></a></li>
        <li><a href="#"><em>></em>Toddler</a></li>
        <li><a href="#"><em>></em>Child</a></li>
        <li><a href="#"><em>></em>Teenager</a></li>
        <li><a href="#"><em>></em>Adult</a></li>
        <li><a href="#"><em>></em>Elder</a></li>
        <li><a href="#"><em>  </em><b>Male</b></a></li>
        <li><a href="#"><em>></em>Toddler</a></li>
        <li><a href="#"><em>></em>Child</a></li>
        <li><a href="#"><em>></em>Teenager</a></li>
        <li><a href="#"><em>></em>Adult</a></li>
        <li><a href="#"><em>></em>Elder</a></li>
    </ul>
        </DIV>
    </li>

    <li id="four" class="amen"><a href="#four">Lots</a>
    <DIV class="accordion-menu">
        <ul class="acc-menu">
        <li><a href="#"><em>></em>Under 20K</a></li>
        <li><a href="#"><em>></em>Over 20K</a></li>
        <li><a href="#"><em>></em>Over 100K</a></li>
        <li><a href="#"><em>></em>Community</a></li>
        <li><a href="#"><em>></em>Apartments</a></li>
        <li><a href="#"><em>></em>Dorms</a></li>
        <li><a href="#"><em>></em>Vacation</a></li>
        <li><a href="#"><em>></em>Career</a></li>
    </ul>
        </DIV>
    </li>

    <li id="five" class ="amen"><a href="#five">Sims</a>
    <DIV class="accordion-menu">
    <ul class="acc-menu">
        <li><a href="#"><em>></em>Female</a></li>
        <li><a href="#"><em>></em>Male</a></li>
        <li><a href="#"><em>></em>Families</a></li>
    </ul>
        </DIV>
    </li>
    
    <li id="six" class ="amen"><a href="#six">Looks</a>
    <DIV class="accordion-menu">
    <ul class="acc-menu">
        <li><a href="#"><em>></em><b>Make-up</b></a></li>
        <li><a href="#"><em>></em>Lipstick</a></li>
        <li><a href="#"><em>></em>EyeShadow</a></li>
        <li><a href="#"><em>></em>EyeLiner</a></li>
        <li><a href="#"><em>></em>Blush</a></li>
        <li><a href="#"><em>></em>Costume Makeup</a></li>
        <li><a href="#"><em>></em>Accessories</a></li>
        <li><a href="#"><em>></em><b>Genetics</b></a></li>
        <li><a href="#"><em>></em>Eyes</a></li>
        <li><a href="#"><em>></em>Hair</a></li>
        <li><a href="#"><em>></em>Skin</a></li>
    </ul>
        </DIV>
    </li>
    
    <li id="seven" class ="amen"><a href="#seven">Walls and Floors</a>
    <DIV class="accordion-menu">
    <ul class="acc-menu">
        <li><a href="#"><em> </em><b>Walls</b></a></li>
        <li><a href="#"><em>></em>Bricks</a></li>
        <li><a href="#"><em>></em>Masonry</a></li>
        <li><a href="#"><em>></em>Poured</a></li>
        <li><a href="#"><em>></em>Paint</a></li>
        <li><a href="#"><em>></em>Wallpaper</a></li>
        <li><a href="#"><em>></em>Tiles</a></li>
        <li><a href="#"><em>></em>Panels</a></li>
        <li><a href="#"><em> </em><b>Floors</b></a></li>
        <li><a href="#"><em>></em>Wood</a></li>
        <li><a href="#"><em>></em>Stone</a></li>
        <li><a href="#"><em>></em>Brick</a></li>
        <li><a href="#"><em>></em>Carpet</a></li>
        <li><a href="#"><em>></em>Linoleum</a></li>
        <li><a href="#"><em>></em>Tiles</a></li>
        <li><a href="#"><em>></em>Poured</a></li>
        <li><a href="#"><em>></em>Miscellaneous</a></li>
    <li><a href="#"><em> </em><b>Terrains</b></a></li>
    </ul>
        </DIV>
    </li>
    
    <li id="eight" class ="amen"><a href="#eight">Build Mode</a>
    <DIV class="accordion-menu">
    <ul class="acc-menu">
        <li><a href="#"><em>></em>Build Mode Sets</a></li>
        <li><a href="#"><em>></em>Doors and Windows</a></li>
        <li><a href="#"><em>></em>Stairs</a></li>
        <li><a href="#"><em>></em>Gardening</a></li>
        <li><a href="#"><em>></em>Roofing</a></li>
        <li><a href="#"><em>></em>Fences and Gates</a></li>
        <li><a href="#"><em>></em>Fireplaces</a></li>
        <li><a href="#"><em>></em>Columns and Arches</a></li>
        <li><a href="#"><em> </em>Carports</a></li>
        <li><a href="#"><em>></em>Pools</a></li>
    <li><a href="#"><em>></em>Other</a></li>
    </ul>
        </DIV>
    </li>

    <li id="nine" class ="amen"><a href="#nine">Gifts from Friends</a>
    <DIV class="accordion-menu">
    <ul class="acc-menu">
        <li><a href="#"><em>></em>BaileyKingpin - Bedding</a></li>
        <li><a href="#"><em>></em>Padre333 - Retro Lamps</a></li>
        <li><a href="#"><em>></em>Joylyn - Skintones</a></li>
        <li><a href="#"><em>></em>Sinajax - Rugs</a></li>
    </ul>
        </DIV>
    </li>

    <li id="ten"  class ="amen"><a href="#ten">Miscellaneous</a>
    <DIV class="accordion-menu">
    <ul class="acc-menu">
        <li><a href="#"><em>></em>Hood Terrains</a></li>
        <li><a href="#"><em>></em>Hood Deco</a></li>
        <li><a href="#"><em>></em>Splash Screens</a></li>
        </DIV>
    </ul>
    </li>
</ul>
</ul>

Because I have two sets of menus (drop-down, and accordion) both of which use CSS/html to do their thing if the user doesn't have JS, you can have multiple of these, just with changing the DIV.

Um - in my code, I have the CSS in a separate CSS, and the lists as it is here has been put into a database table so it becomes fairly short code.

It looks like this in real-life.

pro-type website
(This post was last modified: 19-09-2013 11:35 PM by celebkiriedhel.)

1
#7 19-09-2013 
Yea, jQuery Big Grin

I like it, but MyBB runs on Prototype. So that means Deb is loading 2 js. libraries to get a toggle.

1
#8 20-09-2013 
Thank you Kiri! That menu is what I want..but I don't know if then it will do conflict con Prototype or other my scripts Sad or if then site is more slow.
I can try anyway Big Grin

If problems, I will try code of Leefish.

Uff, I want MyBB only in jQuery Sad

1
#9 05-11-2013 
Thank you Kiri, I have tried your code but there are problems with my site Sad

What's the name of this type of menu in English?
(This post was last modified: 24-10-2014 03:38 AM by noiredeb.)

0


Sorry, that is a members only option