So I am using this code:
http://jsfiddle.net/xSmNs/
$(document).ready(function() {
$('#lightbox_button').click(function() {
$('#lightbox').fadeIn('slow');
$('#lightbox_panel').fadeIn('slow');
});
$('#close_lightbox').click(function() {
$('#lightbox').fadeOut('slow');
$('#lightbox_panel').fadeOut('slow');
});
});
To make popups on click of a link. I want multiple links that output different divs. I was going to just make multiple instances of this code (changing the id so that the buttons open their corresponding divs) but I am wondering if there is a more efficient method using this code?
You can use $.fn.lightbox as a function itself and apply it on a DOM object.
http://jsfiddle.net/7rfpwctm/2/
$(document).ready(function() {
$.fn.lightbox = function(){
$(this).click(function() {
$('#lightbox').fadeIn('slow');
$('#lightbox_panel').fadeIn('slow');
});
$('#close_lightbox').click(function() {
$('#lightbox').fadeOut('slow');
$('#lightbox_panel').fadeOut('slow');
});
};
$('#lightbox_button').lightbox();
$('#another_lightbox_button').lightbox();
});
#lightbox_panel
{
position: relative;
z-index: 99;
width: 500px;
height: 100px;
margin: 30px auto 0;
background-color: #CCC;
display: none;
padding: 10px;
}
#lightbox
{
z-index: 90;
position: absolute;
background-color: #000;
opacity: 0.8;
filter: alpha(opacity=80);
width: 100%;
height: 100%;
display: none;
top: 0;
}
#close_lightbox
{
}
#lightbox_button{
position:absolute;
left:0;
top:100%;
width:200px;
}
#another_lightbox_button{
position:absolute;
right:0;
top:100%;
width:400px;
}
.button
{
position: absolute;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #000;
display: inline-block;
bottom: 10px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<a href="#" id="lightbox_button">
<div class="button">button</div>
</a>
<a href="#" id="another_lightbox_button">
<div class="button">another button</div>
</a>
<div id="lightbox_panel">
<h1>lightbox panel</h1>
<a href="#" id="close_lightbox">
<div class="button">close</div>
</a>
</div>
</div>
<div id="lightbox"></div>
Something like this helps?
Give the light box button 2 data-attributes, which points to the divs which needs to be popup when clicking on that. Also use a common class for all light box buttons.
<a href="#" class="lightbox_button" data-box="#lightbox" data-panel="#lightbox_panel">
<div class="button" >button</div>
</a>
Then you can re-use the code like,
$('.lightbox_button').click(function () {
$($(this).data("box")).fadeIn("slow");
$($(this).data("panel")).fadeIn("slow");
});
Fiddle
You could use this function:
function doModal(boxid,show) {
if (show) {
$('#'+boxid).fadeIn('slow');
$('#'+boxid+'_panel').fadeIn('slow');
} else {
$('#'+boxid).fadeOut('slow');
$('#'+boxid+'_panel').fadeOut('slow');
}
}
And then on your buttons or links:
<span onclick="doModal('Box1',true)">Open Box 1</span>
<span onclick="doModal('Box2',true)">Open Box 2</span>
For closing the boxes:
<span onclick="doModal('Box1',false)">Close Box 1</span>
<span onclick="doModal('Box2',false)">Close Box 2</span>
Related
Hello people I created two divs and when i hover to h3 shows me something. I want display this only when i click on h3. How i can do this?
How to change hover to click? When i do this doesn't working.
Sorry for my bad language.
$(document).ready(function () {
$('li.requirement').hover(function () {
$(this).find('span').show();
}, function () {
$(this).find('span').hide();
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>
You can use .on('click', function(){}); and then inside this function you check to see if it's already visible or not. Take a look here
EDIT
As you want to be just the <h3> clickable, i made an adjustment in the code below, and now you need to cehck for the visibility of the h3 parent, because now the context of this is now h3 and no more the li
$(document).ready(function () {
$('.clickableH3').on('click', function () {
if ($(this.parentElement).find('span').is(":visible")){
$(this.parentElement).find('span').hide();
}else{
$(this.parentElement).find('span').show();
}
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew clickableH3">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw clickableH3">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>
Well you see, in your js code, where you have "hover" ? Well you type "click" there instead ...
The jQuery hover function can have 2 parameters, which is your case. The first one for the hover, the second is for the unhover
So if you want to be able to close and hide on click I advise to use some css and use toggleClass. But if you wan to keep only javascript you can do like this:
$(document).ready(function () {
$('li.requirement').click(function () {
var $elm = $(this);
if( $elm.hasClass('showed') ){
$elm.find('span').removeClass('showed').hide();
}else{
$elm.find('span').addClass('showed').show();
}
});
});
I am trying to create a slide out menu from a span in my nav and am having difficulty. Hope someone can help as I have searched Google and not finding what I am after. Basically, I have this code:
<div style="background-color: #002F33; min-height:50px;">
<span class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img src="assets/images/icon_hamburger.png"></span>
<div>
Link1
Link2
Link3
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>
I simply want to get the menu when the span image is clicked to flyout over the content below. Not sure why I am having trouble with this, but appreciate any help you can give.
I added ids to some of your divs and use javascript to toggle a css class created below
.menu_items_toggle {
opacity: 1 !important;
top: 100% !important;
}
Snippet below
//make a refernce to the container that holds all your links
var menu_item_container = document.getElementById("menu_items")
//This function will show/hide menu options if image is clicked on
function clicker() {
menu_item_container.classList.toggle('menu_items_toggle');
console.log(menu_item_container.classList.contains('menu_items_toggle'))
}
console.log(document.getElementById("span_img_container"));
document.getElementById("menu_img").addEventListener('click', clicker)
#menu {
position: relative;
}
#menu_items {
position: absolute;
top: 0%;
opacity: 0;
transition: all 0.5s;
}
.menu_items_toggle {
opacity: 1 !important;
top: 100% !important;
}
img {
width: 100px;
height: 100px;
}
<div id="menu" style="background-color: #002F33; min-height:50px;">
<span id="span_img_container" class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img id="menu_img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcToFURgZ4pNY28Zsq8ytnVFL7hzYMpGpBSpQWwGqSP6N77YRUXn"></span>
<div id="menu_items" class="">
Link1
<br>
Link2
<br>
Link3
<br>
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>
I have this code which, when the 'A' is clicked, extra content comes down. But, I want the extra content to start hidden. How would I do this?
Here is the code:
HTML:
<section class="box2">
<header class="box-head">
<div class="box-title fr"> <span class="box-icon"></span>
</div> <a class="box-toggle fl active" href="#">A</a>
</header>
<div class="box-content active">
Content</div>
</section>
Javascript:
$("a.box-toggle").on('click', function () {
$('div.box-content').slideToggle(200).toggleClass('active');
});
CSS:
.widget-toggle {
display: block;
overflow: hidden;
text-indent: -9999px;
width: 18px;
height: 9px;
margin-top: 15px;
margin-left: 13px;
background: url(../img/sidebar-arrows.png) no-repeat 0 -18px;
}
.widget-toggle.active {
background: url(../img/sidebar-arrows.png) no-repeat 0 0;
}
Set the .box-content elements to display: none in CSS by default:
.box-content {
display: none;
}
Updated fiddle
Use this way. Replace your code:
$("a.box-toggle").on('click', function () {
$('div.box-content').slideToggle(200).toggleClass('active');
});
With the following:
$('div.box-content').hide();
$("a.box-toggle").on('click', function () {
$(this).closest(".box-head").next('div.box-content').slideToggle(200).toggleClass('active');
});
The reason for change is, if you have multiple .box-head, then it will trigger the slide on everything and not just one.
I want to pop up a menu on click of a div and I got it all working in this Fiddle: http://jsfiddle.net/EhtrR/825/ but I cant manage to make it work on my code.
HTML:
<div id="clickOne" class="clickDesign">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants">
Leafy Test
</div>
<div id="juicyPlants">
Juicy Test
</div>
CSS:
#leafyPlants{
display:none;
position:absolute;
top:50px;
}
#juicyPlants{
display:none;
position:absolute;
top:50px;
}
jQuery:
$("#clickOne").on('click', function() {
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function() {
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
});
It doesn't show anything when I put it my code.
Add this css
<style>
img {
float: left;
display: block;
height: 40px;
width: 40px;
cursor: pointer;
}
#img1 {
background: #b00;
}
#img2 {
background: #c00;
}
#div1 {
display: none;
position: absolute;
top: 50px;
width: 200px;
background: #077;
left: 10px;
}
#div2 {
display: none;
position: absolute;
top: 50px;
width: 200px;
background: #0b0;
left: 10px;
}
br {
clear: both;
}
</style>
This js codes
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function(e) {
$("#img1").on('click', function() {
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#img2").on('click', function() {
$("#div1").fadeOut();
$("#div2").fadeIn();
});
});
</script>
And you HTML
<img id="img1"/> <img id="img2"/> <br/>
<div id="div1">1</div>
<div id="div2">2</div>
It should work. Most probably you did not included jQuery library. I added it.
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
Using it should solve your porblem probably.
I have a body system feature I'd like to implement. When the user hovers over a body part, it highlights and shows information on that specific body part. I've coded the CSS the way I want it, but I don't know anything about JavaScript to get the information to stick when the body part is clicked or the mouse leaves the hover state.
I've searched the forum and found similar issues and have spent hours trying to figure this out myself from others' javascript solutions - I'm at the point where I need to ask for help.
Here is a flash prototype I made of my desired effect:
http://inwavemedia.com/temp/proto/Main.html
Here is the live HTML if you want to take a look at what I have now:
http://inwavemedia.com/temp/excretory.html
Here is my code:
<style type="text/css">
#bodysystem-excretory {
width: 618px;
height: 504px;
background: url(excretory.png) no-repeat;
margin: 10px auto; padding: 0;
position: relative;
border: 1px solid #999;
}
#bodysystem-excretory li {
margin: 0;
padding: 0;
list-style: none;
display: block;
position: absolute;
}
#bodysystem-excretory a {
display: block;
/* text-indent: -9999px;*/
text-decoration: none;
}
#esoph {
left: 85px;
top: 41px;
width: 46px;
height: 94px;
z-index: 10;
}
#lungs {
left: 76px;
top: 84px;
width: 84px;
height: 68px;
z-index: 20;
}
#bladder {
left: 87px;
top: 148px;
width: 64px;
height: 104px;
z-index: 30;
}
#esoph a {
height: 94px;
}
#lungs a {
height: 67px;
}
#bladder a {
height: 104px;
}
#esoph a:hover {
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -25px -561px;
}
#lungs a:hover {
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -105px -523px;
}
#bladder a:hover {
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -114px -618px;
}
.info span{
display: none
}
.info{
position:relative;
z-index:1124;
color:#000;
}
.info:hover{
z-index:1125;
}
.info:hover span{
display:block;
position:absolute;
top:-30px;
left:155px;
width:370px;
color:#000;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<ul id="bodysystem-excretory">
<li id="esoph">
<span id="esoph-info"><h3>Esophagus</h3><p>This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. </p></span>
</li>
<li id="lungs"><span id="lungs-info"><h3>Lungs</h3></span></li>
<li id="bladder"><span id="bladder-info"><h3>Bladder</h3></span></li>
</ul>
Below is the required changes you would require to do:
<head>
<title>Untitled Page</title>
<style type="text/css">
#bodysystem-excretory
{
width: 618px;
height: 504px;
background: url(excretory.png) no-repeat;
margin: 10px auto;
padding: 0;
position: relative;
border: 1px solid #999;
}
#bodysystem-excretory li
{
margin: 0;
padding: 0;
list-style: none;
display: block;
position: absolute;
}
#bodysystem-excretory a
{
display: block; /* text-indent: -9999px;*/
text-decoration: none;
}
#esoph
{
left: 85px;
top: 41px;
width: 46px;
height: 94px;
z-index: 10;
}
#lungs
{
left: 76px;
top: 84px;
width: 84px;
height: 68px;
z-index: 20;
}
#bladder
{
left: 87px;
top: 148px;
width: 64px;
height: 104px;
z-index: 30;
}
#esoph a
{
height: 94px;
}
#lungs a
{
height: 67px;
}
#bladder a
{
height: 104px;
}
#esoph a:hover
{
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -25px -561px;
}
#lungs a:hover
{
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -105px -523px;
}
#bladder a:hover
{
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -114px -618px;
}
.info span
{
display: none;
}
.info
{
position: relative;
z-index: 1000;
color: #000;
}
#bodysystem-excretory li[selected='true'] .info
{
z-index:1200;
}
#bodysystem-excretory li[selected='true'] .info span
{
display: block;
position: absolute;
top: -30px;
left: 155px;
width: 370px;
color: #000;
background-color: #FFFFFF;
}
.info:hover
{
z-index: 1125;
}
.info:hover span
{
display: block;
position: absolute;
top: -30px;
left: 155px;
width: 370px;
color: #000;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function SelectOrgan(obj)
{
var parentObj = obj.parentNode;
var organs = document.getElementById("bodysystem-excretory").getElementsByTagName("li");
for (var i = 0, len = organs.length; i < len; i++)
{
organs[i].setAttribute("selected", "false");
}
parentObj.setAttribute("selected", "true");
}
</script>
</head>
<body>
<ul id="bodysystem-excretory">
<li id="esoph" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="esoph-info">
<h3>
Esophagus</h3>
<p>
This is esophagus information. This is esophagus information. This is esophagus
information. This is esophagus information. This is esophagus information. This
is esophagus information. This is esophagus information.
</p>
</span></a></li>
<li id="lungs" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="lungs-info">
<h3>
Lungs</h3>
</span></a></li>
<li id="bladder" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="bladder-info">
<h3>
Bladder</h3>
</span></a></li>
</ul>
</body>
</html>
Note that each of the organs have been assigned an absolute position with different positions in the space. If you keep all of them the same with same left, top, width, and height, then you would achieve what you require.
I don't think either of the previous answers quite do what you were looking for. This is my suggestion. Note that the CSS is altered as well as javascript added at the end.
<html>
<head><style type="text/css">
#bodysystem-excretory {
width: 618px; height: 504px;
background: url("excretory.png") no-repeat;
margin: 10px auto; padding: 0;
position: relative;
border: 1px solid #999;
}
#bodysystem-excretory li {
margin: 0; padding: 0;
list-style: none;
display: block;
position: absolute;
}
#bodysystem-excretory a {
display: block;
/* text-indent: -9999px;*/
text-decoration: none;
}
#esoph {
left: 85px; top: 41px;
width: 46px; height: 94px;
z-index: 10;
}
#lungs {
left: 76px; top: 84px;
width: 84px; height: 68px;
z-index: 20;
}
#bladder {
left: 87px; top: 148px;
width: 64px; height: 104px;
z-index: 30;
}
#esoph a {
height: 94px;
}
#lungs a {
height: 67px;
}
#bladder a {
height: 104px;
}
#esoph:hover, #esoph.selected {
background-image: url("excretory.png") no-repeat -25px -561px;
}
#lungs:hover, #lungs.selected {
background-image: url("excretory.png") no-repeat -105px -523px;
}
#bladder:hover, #bladder.selected {
background-image: url("excretory.png") no-repeat -114px -618px;
}
.info span{
display: none
}
.info{
position:relative;
z-index:1124;
color:#000;
}
.selected .info{
z-index:1125;
}
.selected .info span {
display:block; position:absolute;
top:-30px; left:155px;
width:370px;
color:#000; background-color:#FFFFFF;
}</style></head>
<body>
<ul id="bodysystem-excretory">
<li id="esoph">
<a href="#" class="info">
<span id="esoph-info"><h3>Esophagus</h3>
<p>
This is esophagus information. This is esophagus information.
This is esophagus information. This is esophagus information.
This is esophagus information. This is esophagus information.
This is esophagus information. </p></span></a>
</li>
<li id="lungs"><a href="#" class="info">
<span id="lungs-info"><h3>Lungs</h3></span></a>
</li>
<li id="bladder"><a href="#" class="info">
<span id="bladder-info"><h3>Bladder</h3>
</span></a></li>
</ul><script type="text/javascript">
// Get the <li> elements as a list called 'parts'
var parts =
document.getElementById('bodysystem-excretory').getElementsByTagName('li');
function getClickFunction(part) {
return function() {
// This is the function that will be called when one of the <li>s is clicked
if (part.className == 'selected') { // if the body part is already selected
part.className = ''; // ... then deselect it
}
else { // otherwise,
// first deselect all of the body parts
for (var i = 0; i < parts.length; i++) {
parts[i].className = '';
}
// then select the one that's been clicked
part.className = 'selected';
}
}
}
// Now, attach this function to all of the <li> elements representing body parts
for (var i = 0; i < parts.length; i++) {
parts[i].onclick = getClickFunction(parts[i]);
}
</script></body></html>
You could add a click event which looks at what we clicked on and then changes the style permanently on clicking. This would then 'reveal' the new part permanently.
Your HTML:
<li id="lungs" onclick="highlight(this.id)">
<!--some stuff-->
</li>
And in javascript (to keep things simple, I've put it into <script> tags, just add this + your other cases into your header somewhere):
<script>
function highlight(id) {
var part = document.getElementById(id);
switch(id){
case "lungs":
part.style.backgroundImage="url(excretory.png)";
part.style.backgroundRepeat="no-repeat";
part.style.backgroundPosition="-105px 523px";
break;
//rinse repeat for all cases, don't forget the : after your case and to add break; at the end of each line
default:
//do nothing, or something, whatever
}
</script>
You can learn more about javascript switch statements here.
I think the most elegant way to go about is having two background images for each organ, [organ].png and [organ]_hover.png. then create one hover event for all the organs by applying the same class to all of them (like .organ);
at this point you can use the .css() function of JQuery to change the background of the specific organ (after getting it by using $(this).attr("id")) by adding the _hover suffix to it.
You should also maintain record of the current organ, so whenever the user hovers over a new organ, you change the previous organ's background back to [organ].png, and then save the new organ as the current one.
As for the info, just use the organ name you already fetched to make it display:block;, and the previous one display:none;
EDIT: here is a fiddle demonstrating the core functionality
HTML:
<div id="human_body">
<div class="organ" id="lungs"></div>
<div class="organ" id="liver"></div>
<div class="organ" id="pancreas"></div>
<div class="organ" id="heart"></div>
<div class="organ" id="kidneys"></div>
</div>
<div id="info">
<div id="lungs_info">
Lungs
</div>
<div id="pancreas_info">
Pancreas
</div>
<div id="liver_info">
Liver
</div>
<div id="heart_info">
Heart
</div>
<div id="kidneys_info">
Kidneys
</div>
</div>
CSS:
.organ {
width:40px;
height:40px;
margin:10px;
}
#lungs {
background:url("http://www.fishweb.co.il/organs/lungs.png");
}
#heart {
background:url("http://www.fishweb.co.il/organs/heart.png");
}
#pancreas {
background:url("http://www.fishweb.co.il/organs/pancreas.png");
}
#kidneys {
background:url("http://www.fishweb.co.il/organs/kidneys.png");
}
#liver {
background:url("http://www.fishweb.co.il/organs/liver.png");
}
#info>div {
display:none;
}
JS (JQuery):
var current='';
$(".organ").mouseover(
function(){
if (current!='') {
$("#" + current).css("background","url(http://www.fishweb.co.il/organs/" + current +".png)"); // remove the highlight from the prev organ
$("#" + current + "_info").hide();
}
current = $(this).attr("id");
$(this).css("background","url(http://www.fishweb.co.il/organs/" + current +"_hover.png)"); // highlight the current organ
$("#" + current + "_info").show();
}
);
You need to create a simple set of identifiers on the links and containers which correspond with each other.
JSFiddle: http://jsfiddle.net/Y4Wtn
<style>
.btn {font-weight:normal}
.btn.active {font-weight:bold;}
.pane {display:none;border:1px #ccc solid;padding:10px;}
.pane.active {display:block;}
</style>
<script>
// insert jquery here
$(document).read(function(){
$('.btn').click(function(){
// grab the rel value of the the link that was clicked
var thisRel = $(this).attr('rel');
// remove active class from all .btn
$('.btn').removeClass('active');
// add active class to link that was clicked
$(this).addClass('active');
// remove all active classes from .pane
$('.pane').removeClass('active');
// add class active to pane with the same rel value clicked link
$('.pane[rel="'+thisRel+'"]').addClass('active');
});
});
</script>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<div class="pane active" rel="1">Pane One</div>
<div class="pane" rel="2">Pane Two</div>
<div class="pane" rel="3">Pane Three</div>