Develop Reference

Stepper with pure javascript - previous function not working

How to make it return to false once exceeded max step (which is the last step), previous function not working once exceeded max step, I tried to set current step as -1 but still doesn't work.
I get this error msg (TypeError: bullets[current] is undefined) on my console when it exceeded max step.
Can somebody help me with this? Thanks in advance.
const bullets=[...document.querySelectorAll('.bullet')];
const max=4;
let current=-1;
function next(){
current+=1;
if(!bullets[current]){
return false;
}
bullets[current].classList.add('hovered');
}
function previous(){
bullets[current].classList.remove('hovered');
current-=1;
if(!bullets[current]){
return false;
}
bullets[current].classList.add('hovered');
}
.progressbar{
display:flex;
justify-content:space-between;
align-items:flex-end;
width:90%;
margin:0 auto;
margin-bottom:40px;
}
.item{
text-align:center;
width:20%;
position:relative;
}
.text{
height:50px;
margin:10px 0px;
color:#3CB371;
}
.bullet{
border:1px solid #3CB371;
height:20px;
width:20px;
color:#3CB371;
display:inline-block;
transition:background-color 500ms;
line-height:20px;
}
.bullet.hovered{
color:#fff;
background-color:#3CB371;
bottom:10px;
}
.bullet.completed:after{
content:'';
position:absolute;
bottom:80px;
height:1px;
width:calc(133% - 21px);
background-color:#3CB371;
margin-left:7px;
}
<div class="progressbar">
<div class="item">
<div class="bullet completed">1</div>
<div class="text">Hello Hello Hello</div>
</div>
<div class="item">
<div class="bullet completed">2</div>
<div class="text">Hello</div>
</div>
<div class="item">
<div class="bullet completed">3</div>
<div class="text">Hello</div>
</div>
<div class="item completed">
<div class="bullet">4</div>
<div class="text">Hello</div>
</div>
</div>
<div onclick="previous();">Previous</div>
<div onclick="next();">Next</div>

You're unconditionally incrementing/decrementing current at the moment. Even if you don't try changing the classList on this call of next or previous, the next time either button is clicked, the current index may not exist. So, in previous, when you do bullets[current].classList.remove('hovered'); at the beginning of the function, that will throw if the last current went beyond the possible indicies for the bullets collection.
Consider using Math.max / Math.min to ensure that current is constrained to the possible indicies (or -1, in the case that nothing should be highlighted):
const bullets = [...document.querySelectorAll('.bullet')];
let current = -1;
function next() {
current = Math.min(current + 1, bullets.length - 1);
bullets[current].classList.add('hovered');
}
function previous() {
if (bullets[current]) {
bullets[current].classList.remove('hovered');
}
current = Math.max(current - 1, -1);
}
.progressbar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.item {
text-align: center;
width: 20%;
position: relative;
}
.text {
height: 50px;
margin: 10px 0px;
color: #3CB371;
}
.bullet {
border: 1px solid #3CB371;
height: 20px;
width: 20px;
color: #3CB371;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.hovered {
color: #fff;
background-color: #3CB371;
bottom: 10px;
}
.bullet.completed:after {
content: '';
position: absolute;
bottom: 80px;
height: 1px;
width: calc(133% - 21px);
background-color: #3CB371;
margin-left: 7px;
}
<div class="progressbar">
<div class="item">
<div class="bullet completed">1</div>
<div class="text">Hello Hello Hello</div>
</div>
<div class="item">
<div class="bullet completed">2</div>
<div class="text">Hello</div>
</div>
<div class="item">
<div class="bullet completed">3</div>
<div class="text">Hello</div>
</div>
<div class="item completed">
<div class="bullet">4</div>
<div class="text">Hello</div>
</div>
</div>
<div onclick="previous();">Previous</div>
<div onclick="next();">Next</div>

Merge dots into line (with css filter?)

How do you merge dots (<div>s) into a line in css?
I have the following grid made up of <divs>:
<div id="outer-container">
<div id="container">
<div class="gridBlock" style="left:-5; top:-5; width:30px; height:30px; background-color: blue;"></div>
<div class="gridBlock" style="left:15; top:-5; width:30px; height:30px; background-color: blue;"></div>
<div class="gridBlock" style="left:35; top:-5; width:30px; height:30px; background-color: blue;"></div>
<div class="gridBlock" style="left:55; top:-5;"></div>
<div class="gridBlock" style="left:-5; top:15; width:30px; height:30px; background-color: red;"></div>
<div class="gridBlock" style="left:15; top:15; width:30px; height:30px; background-color: red;"></div>
<div class="gridBlock" style="left:35; top:15; width:30px; height:30px; background-color: red;"></div>
<div class="gridBlock" style="left:55; top:15;"></div>
</div>
</div>
css:
#outer-container {
padding: 48px;
filter: brightness(1.4) contrast(40); /* ? */
}
#container {
position: absolute;
filter: blur(10px) brightness(1.4) contrast(100); /* ? */
}
.gridBlock {
background-color: #f2f2f2;
border: .5px solid black;
width: 20px;
height: 20px;
display: inline-grid;
position: absolute;
}
This would look like (no css filter):
How would I make this into a line?
I have tried using css filter, but it doesn't really work, see screenshot below:
What I want:
a more complex example
No css filter:
With css filter
This is not quite what I want, as it interferes with the colors and is blurry around the edges.
I have seen this, but it wasn't very helpful for this situation.
A JavaScript solution would be okay as well.
Thanks in advance,

I have 3 issues revolving around the styling of divs

I have 3 issues I would like help with.
Issue 1.
I have a navigation bar with numerous elements inside of it. The div with the ID shopcartbar will display the the div with ID shoppingTab once it is hovered over. I did initially set a onmouseout on the shopcartbar div but then when I tried to move the cursor on to the shoppingTab div, it would disappear. I would like to be able to keep the shoppingTab div visible whilst hovering over either of these divs and for the onmouseout to work on either of these as well, or at least be able to hover from the shopcartbar div on to the shoppingTab div to keep it visible because right now it disappears as there is a tiny gap between the two which even when I used CSS to close, didn't fix the problem. Before you read the code and say that I have set it to constantly be fixed on the page, I intentionally set it to have no onmouseout event otherwise it would vanish as soon as I moved my cursor therefore for debugging purposes, I made it appear permanently forcing me to refresh the page every time I wanted it gone.
Issue 2
When I set the height of the shoppingTab div to 100%, it only covers the span tags within it and not the 9 divs just underneath those tags, leaving the content overflowing out of the div. So I want the shoppingTab div to actually extend with ALL of the content and not just stop after the span tags. Please note: the amount of content changes so it can't be a fixed pixel height or percentage.
Issue 3
I have a cookie that just places the user's name in the topnavbar div which is placed before the shopcartbar div. When I hover over the shopcartbar div to show the shoppingTab div, it makes the persons name disappear whilst leaving the text inside the shopcartbar div. I would like the text from the topnavbar div to remain as well even when the shoppingTab div is displayed upon hover. Please note: the persons name must be placed before the shopcartbardiv.
Here is the HTML that contains everything needed to solve the 3 issues.
#charset "utf-8";
/* CSS Document */
body{ /* Applies to the <body> tag */
margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
width:100%; /* This sets the width */
height:100%; /* This sets the height */
background-color:black; /* Sets the background colour */
font-family:"Myriad Pro"; /* Sets the font family */
}
.header{ /* The header class */
width:100%;
background-color:#323232;
color:white; /* The sets the colour of the font */
}
.body{
width:100%;
height:1100px;
background-color:white;
color:black;
text-align:center; /* Determines the positioning of the text alignment */
}
.footer{
width:100%;
height:50px;
background-color:#323232;
color:white;
text-align:center;
}
div{
display: inline-block; /* Sets the display type */
float:left; /* Sets the float position */
}
#one, #two, #three, #four{
background-color:#323232;
height:90px;
color:white;
text-align:center;
font-size:25px;
}
#slider{
background-color:#ed1c24;
height:10px;
width:100px;
position: absolute; /* Sets the position to a specific type */
left: 0; /* Sets the number of pixels from the left that this object is placed */
bottom:0; /* Sets the number of pixels from the bottom that this object is placed */
}
.inside{
margin-left:30px; /* Specifies the margin from the left side */
margin-right:30px; /* Specifies the margin from the right side */
padding-top:7px; /* Specifies the padding from the top side */
pointer-events:none; /* Specifies the cursor events */
margin-top:25px; /* Specifies the margin from the top side */
}
.button{
display: inline-block;
border-radius: 4px; /* Specifies the radius of each corner */
background-color: #ed1c24;
border:none; /* Specifies the border type */
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 10px;
width: 200px;
transition: all 0.5s; /* Specifies the the interval over which an animation occurs */
cursor: pointer; /* Specifies the cursor type */
margin: 5px;
height:60px;
}
.button span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after{
content: '»'; /* Specifies the content of the div */
position: absolute;
opacity: 0; /* Specifies the opacity or transparency level */
top: 0; /* Specifies the distance from the top */
right: -20px; /* Specifies the distance from the right */
transition: 0.5s;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span:after{
opacity: 1;
right: 0;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:block;
}
#loginScreen{
height:300px;
width:400px;
z-index:10;
background-color:white;
no-repeat; border:7px solid #cccccc;
border-radius:10px;
margin-left:35%;
margin-top:12%;
position:relative;
padding-top:10px;
font-family:"Myriad Pro";
font-size:18px;
}
.cancel{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:32px;
width:32px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
border-radius:36px;
cursor: pointer;
}
p1{
font-style: italic;
overflow: hidden;
text-align: center;
}
p1:before, p1:after{
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 40%;
}
p1:before{
right: 0.5em;
margin-left: -50%;
}
p1:after{
left: 0.5em;
margin-right: -50%;
}
#searchbar{
background:url(../images/searchbarbg.png) no-repeat scroll;
padding-left:30px;
height:24px;
width:180px;
border-radius:36px;
}
.product{
height:290px;
width:200px;
float:left;
border: 5px solid black;
border-radius:10px;
margin-left:3%;
margin-top:3%;
font-size:16px;
text-align:center;
cursor:pointer;
}
.product:hover{
border:5px solid #ed1c24;
}
table{
border-collapse: collapse;
}
table, td, th{
border: 0px solid black;
}
#shoppingTab{
display:none;
height:670px;
width:400px;
background-color:white;
color:black;
position:relative;
margin-top:-2px;
border-radius:10px;
color:black;
border:1px solid #323232;
padding:10px;
float:right;
z-index:50;
}
.plusbutton{
height:25px;
width:25px;
border:1px solid black;
background-color:#323232;
float:left;
border-radius:5px 0px 0px 5px;
color:white;
cursor:pointer;
}
.minusbutton{
height:25px;
width:25px;
border:1px solid black;
background-color:#323232;
float:left;
border-radius:0px 5px 5px 0px;
color:white;
cursor:pointer;
}
.quantityBox{
height:23px;
width:25px;
border-top:1px solid black;
border-bottom:1px solid black;
background-color:white;
float:left;
text-align:center;
line-height:24px;
}
.smallProduct{
height:50px;
width:390px;
float:left;
border: 5px solid black;
border-radius:10px;
font-size:16px;
cursor:pointer;
margin-bottom:10px;
overflow:hidden;
}
.smallProduct:hover{
border:5px solid #ed1c24;
}
/* #ed1c24 is red, #323232 is grey */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="float:right; font-family:'Myriad Pro'; background-image:url(images/loginsignupbar.png); width:535.1px; height:30px">
<div onmouseover="document.getElementById('shoppingTab').style.display='block';" id="shopcartbar" style="float:right; font-size:24px; margin-top:-7px">
<img src="images/shoppingCart.png" height="30px"/> Shopping Cart (<span id="numberOfItems">0</span>)
</div>
<div id="shoppingTab">
Shopping Cart<br />
<div class="smallProduct" style="margin-top:5px" id="thmbproduct0"></div>
<div class="smallProduct" id="thmbproduct1"></div>
<div class="smallProduct" id="thmbproduct2"></div>
<div class="smallProduct" id="thmbproduct3"></div>
<div class="smallProduct" id="thmbproduct4"></div>
<div class="smallProduct" id="thmbproduct5"></div>
<div class="smallProduct" id="thmbproduct6"></div>
<div class="smallProduct" id="thmbproduct7"></div>
<div class="smallProduct" id="thmbproduct8"></div>
Total: $<span id="totalPrice">00</span>.00
</div>
<span id="topnavbar" style="float:right; font-size:24px; margin-top:5.5px">
</span>
</div>
<div style="float:right; clear:right"> <!-- This is the navigation menu -->
<div style="position:relative"> <!-- This is the container of the navigation menu -->
<div id="slider"></div> <!-- This is the slider bar -->
<div id="one" class="item"><div class="inside">Home</div></div> <!-- This is just one of the buttons -->
<div id="two" class="item"><div class="inside">About Us</div></div>
<div id="three" class="item"><div class="inside">Shop</div></div>
<div id="four" class="item"><div class="inside">Contact</div></div>
</div>
</div>
</div>
<div class="body"> <!-- This is the body --><br />
<span style="font-size:50px">Welcome to the store.</span><br />
<table width="90%" style="margin-left:5%; margin-bottom:2%">
<tr>
<td style="width:20%; border-right:solid black 1px; border-bottom:solid black 1px"><b>Search Tools</b></td>
<td style="border-bottom:solid black 1px"><b>Products</b></td>
<td style="border-bottom:solid black 1px"><span style="float:right; margin-bottom:1%">Search for products... <span style="color:#666"><i>(e.g. Mirage Sedan)</i></span> <input type="text" id="searchbar" onkeyup="searchProducts(this.value)"/></span></td>
</tr>
<tr>
<td style="border-right:solid black 1px; padding-top:3%" valign="top">
<b>Sort Type:</b><br /><br />
<select id="sortType">
<option value="AtoZ">A to Z</option>
<option value="ZtoA">Z to A</option>
<option value="LowtoHigh">Price (low to high)</option>
<option value="HightoLow">Price (high to low)</option>
</select>
<br /><br /><form><b>Price range:</b><br /><br /><input id="priceRange" step="100" value="42000" min="12000" max="42000" type="range"/><div id="rangeVal">0</div><br /><br /><b>Model Type:</b><br /><br /><input type="radio" name="model"/>Car<br /><input type="radio" name="model"/>SUV</form></td>
<td colspan="2">
<div class="product" id="product0"></div>
<div class="product" id="product1"></div>
<div class="product" id="product2"></div>
<div class="product" id="product3"></div>
<div class="product" id="product4"></div>
<div class="product" id="product5"></div>
<div class="product" id="product6"></div>
<div class="product" id="product7"></div>
<div class="product" id="product8"></div>
</td>
</tr>
</table>
</div>
<div class="footer"> <!-- This is the footer -->
<br />This is the footer</span>
</div>
</div>
<div id="cover">
<div id="loginScreen">
<center id="content"><br />
<span style="font-size:45px" id="popuptitle">Welcome!</span><br />
<span id="popupdescription">Please log in or sign up.</span><br />
<button class="button" style="font-size:20px; height:45px; width:150px; margin-top:15px; margin-bottom:15px" onclick="logInMenu()"><span>Log In</span></button><br /><p1>OR</p1><br />
<button class="button" style="font-size:20px; height:45px; width:150px; margin-top:15px; margin-bottom:15px" onclick="signUpMenu()"><span>Sign Up</span></button>
</center>
<a onclick="document.getElementById('cover').style.display = 'none'" class="cancel">×</a>
</div>
</div>
Desired functionality for issue 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.container{
width:960px;
margin:auto;
}
.header{
width:960px;
height:100px;
background-color:#06F;
float:left;
}
.trolley{
width:150px;
height:30px;
background-color:white;
float:right;
border-radius:10px;
color:black;
border:1px solid black;
line-height:30px;
font-family:"Calibri";
cursor: pointer;
}
.shop{
width:960px;
height:700px;
background-color:white;
float:left;
font-family:"Calibri Light";
padding:20px;
}
#shoppingTab{
display:none;
height:400px;
width:400px;
background-color:#CCC;
color:black;
position:relative;
margin-top:1px;
border-radius:10px;
color:black;
border:1px solid black;
padding-left:10px;
float:right;
}
html{
background-color:#00F;
}
.product{
height:200px;
width:150px;
float:left;
border: 1px solid black;
border-radius:10px;
margin-right:20px;
font-size:16px;
text-align:center;
cursor:pointer;
}
.product:hover{
border:1px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<span id="name"></span><div class="trolley" onmouseover="tabDisplay('block')" onmouseout="tabDisplay('none')"><center>Shopping Cart <span style='font-family:webdings'>¤</span> <span id="NOI" style="background-color:red; border-radius:360px; color:white; padding-left:5px;padding-right:5px">0</span></center>
<div id="shoppingTab">You have selected <span id="NOI2">0</span> items. Your total is $<span id="totalPrice">0</span><br/><span id="itemsList"></span></div>
</div>
</div>
<div class="shop" style="font-size:28px">Welcome, <span id="name2"></span>.<hr /><br/>Products<br/><hr />
<div class="product" onclick="addToCart('sunglasses', 0, 70)">Pair of sunglasses ($70)<br /><br /><span onclick="change(1)">Click to add to cart</span></div>
<div class="product" onclick="addToCart('shoes', 1, 180)">Pair of shoes ($180)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
<div class="product" onclick="addToCart('belt', 2, 20)">A belt ($20)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
</div>
</div>
</body>
</html>
<script>
var customerName = "";
var numberOfItems = 0;
var total = 0;
var items = [];
var stat = []
for(var a = 1; a <= 3; a++){
stat[a] = false;
}
function update(){
document.getElementById("NOI").innerHTML = numberOfItems;
document.getElementById("NOI2").innerHTML = numberOfItems;
document.getElementById("totalPrice").innerHTML = total;
document.getElementById("itemsList").innerHTML = items.join("<br />");
}
function tabDisplay(displayStatus){
shoppingTab.style.display = displayStatus;
}
function addToCart(productName, productID, price){
items[productID] = productName;
total += price;
numberOfItems++;
update();
}
function removeFromCart(productName, productID, price){
items.splice(productID, 1);
total -= price;
if(stat[productID]){
numberOfItems--;
}
update();
}
function change(i){
if(stat[i] == false){
stat[i] = true;
}else{
stat[i] = false;
}
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("customer");
if (user != "") {
customerName = getCookie("customer");
document.getElementById("name").innerHTML = customerName;
alert("Welcome again, " + user + ".");
} else {
document.getElementById("name").innerHTML = "please set up an account";
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("customer", user, 30);
document.getElementById("name").innerHTML = user;
}
}
}
function changeCookie(){
var user = getCookie("customer");
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("customer", user, 30);
}
document.getElementById("name").innerHTML = user;
}
checkCookie();
</script>

For issue 1, you could try a setTimeout() function in the onmouseout() function linking to the actual code (to make it disappear) with a delay (in milliseconds e.g: 500)
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
If it doesn't work, try putting both shoppingtab and shopcartbar in a single div and use onmouseover of that div to display and hide shoppingTab

How to give opacity for div when it is set Overflow=visible

I have 1 div and 1 image tag , one upon the other. Div is smaller than image.
I have set overflow=visible for div. My question is that, when I insert an image to image tag, the content which is overflowed through div should be opacity=0.5 like this.
for me it shows like this.. any help
<div style="border-style: solid; border-width: 2px; height: 5cm; width: 8cm;top: 20px; left: 20px; position: relative; overflow: visible;" id="divimg">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" style="height: 7cm; width: 10cm;" />
</div>

If you can change HTML to something like this:
<div id="holder">
<div id="overlay">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" />
</div>
<div id="box"></box>
</div>
CSS:
#holder {
width:500px;
height:250px;
position:relative;
overflow:hidden;
}
#overlay {
width:500px;
height:250px;
opacity:0.5;
}
#displayimg {
width:500px;
height:250px;
}
#box {
width:250px;
height:100px;
background-color:black;
position:absolute;
left:200px;
top:70px;
overflow:hidden;
}
#box #ima {
position:absolute;
width:500px;
height:250px;
display:block;
}
And little JQuery magic:
$('#box').append('<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="ima" /> ');
$('#ima').offset($('#holder').offset());
$( "#box" ).draggable();
$( "#box" ).draggable({
drag: function() {
$('#ima').offset($('#holder').offset());
}
});
Since you have mentioned dragging, i have imported JQuery UI in fiddle:
http://jsfiddle.net/y3c41d10/1/
For resizing, you will have to do some calculations, but it is doable, i hope...

Here is the demo for your requirement.
.outter_div{width:400px; height: 200px;position: relative;}
.outter_div:after{content:"";border:50px solid rgba(255,255,255,0.5);position: absolute; top: 0;width: 300px;height: 100px;}
img{width: 100%;position:}
<div class="outter_div">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/>
</div>
JSFiddle demo

This is what I came up with:
<div class="container">
<div class="main">
<div class="sub">This is a text</div>
</div>
</div>
.main {
background-image:url(http://lorempixel.com/g/200/200/);
position: relative;
}
.container {
width:300px;
height:300px;
}
.sub {
text-align: center;
padding:15px;
border: solid 30px rgba(255, 255, 255, 0.5);
color:white;
}
Here is the JSFiddle demo

Set div's left value based on grandparent element

I have an absolute div nested inside a relative div. I want the absolute div's left value to be relative to the grandparent's position, but still allow it's height to be relative to it's parent element. Here is where the page is: http://pixeloft.com/clients/supportcenter/facilitators/
I want the left value of the bio element to always have the left value of the first "Frank Abdale" on click.
Is this possible by setting the div's left value through js?
Here is my code: http://jsfiddle.net/6RQ3u/
HTML:
<div class="person">
<div class="person-info"> <a class="showBio" target="1">
<h4>Name 1</h4></a>
<div class="arrow" id="arrow-1">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-1"><a class="hideBio" target="1">X</a>Bio</div>
</div>
</div>
<div class="person">
<div class="person-info"> <a class="showBio" target="2">
<h4>Name 2</h4></a>
<div class="arrow" id="arrow-2">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-2"><a class="hideBio" target="2">X</a>Bio</div>
</div>
</div>
<div class="person">
<div class="person-info"> <a class="showBio" target="3">
<h4>Name 3</h4></a>
<div class="arrow" id="arrow-3">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-3"><a class="hideBio" target="3">X</a>Bio</div>
</div>
</div>
CSS:
.person a h4 {
color: #000;
font-weight: normal;
font-size: 18px;
line-height: 21px;
width: 100px;
}
.bio {
border-top: 18px solid #387496;
position:absolute;
width:618px!important;
float:left;
background-color:#d8edf4;
padding:15px 170px;
top:284px;
left:-19px;
display:none;
z-index:200;
clear: both;
}
.person {
width:164px;
margin-right:20px;
float:left;
display:inline;
margin-bottom:30px;
position: relative;
}
.person-info {
float:left;
}
.showBio {
float:left;
}
.hideBio {
float:right;
color:#fff!important;
font-size:11px;
position: absolute;
right: 10px;
top: -14px;
}
.arrow {
display:none;
background: url('images/bio-arrow.jpg') no-repeat -2px -6px #fff;
float: left;
display: block;
clear: both;
width: 30px;
height: 15px;
text-indent: -3000px;
}
a{cursor:pointer;}
JQuery:
jQuery(function () {
jQuery('.bio').hide();
jQuery('.arrow').hide();
jQuery('.showBio').click(function () {
jQuery('.bio').hide();
jQuery('.arrow').hide();
jQuery('#bio-box-' + $(this).attr('target')).slideToggle('fast');
jQuery('#arrow-' + $(this).attr('target')).slideToggle('fast');
});
jQuery('.hideBio').click(function () {
jQuery('#bio-box-' + $(this).attr('target')).slideToggle('slow');
jQuery('#arrow-' + $(this).attr('target')).slideUp();
});
});
Thanks for all your help!