We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
[ C ] Clickable Box
Topic Started: May 10 2012, 12:24 PM (427 Views)
Im Gold
Member
[ *  * ]
Board Address: http://ea-rs.us
Board Software: zeta
Description: I want to have the same clickable box as on this site http://s4.zetaboards.com/Team_Trinity/index/
Posted Image

Note: I did do some searching for a clickable box and i found some codes but it is not the same.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Admin CP Posted Image Themes Posted Image Board Template

Javascripts:
Code:
 
<style type="text/css">
#click_box {
text-align: center;
}

#options {
margin: 0;
padding: 0;
}

#options li {
display: inline;
cursor: pointer;
}
</style>
Which wrapper the following coding goes depends on where you want it to appear.
Code:
 
<div id="click_box">
<ul id="options">
<li>Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
</ul>
<div id="contents">
<div>Content 1</div>
<div style="display: none">Content 2</div>
<div style="display: none">Content 3</div>
</div>
</div>

<script type="text/javascript">
function addEQ(eq) {
$('#options li:eq(' + eq + ')').click(function () {
$(this).addClass('active');
$('#options li:not(:eq(' + eq + '))').removeClass('active');
$('#contents div').css('display', 'none');
$('#contents div:eq(' + eq + ')').css('display', 'block');
});
}

addEQ('0');
addEQ('1');
addEQ('2');
</script>
You can proceed to style it after it is setup.
Offline Profile Goto Top
 
Im Gold
Member
[ *  * ]
Thanks alot cory!
Offline Profile Goto Top
 
Eccentric Feline
Member Avatar
梦想
[ *  *  *  *  *  *  *  * ]
Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic