Hello, I used a plugin from CSS-Tricks.com which is located here: http://css-tricks.com/downloads/
It's an Infogrid Accordion. It's working very well, but I'm having problems with the position of the columns.
At first, all of them are in the middle, but when I clicked a column, all the others will stack to the left, which leaves an unpleasant space to the right side of the website. Here is the HMTL code that I used:
<!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>Apink Profile</title>
<link rel='stylesheet' type='text/css' href='css/style-apink.css'/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/infogrid.js'></script>
<script type='text/javascript' src='js/jquery-ui.js'></script>
<script type='text/javascript' src='js/cycle.js'></script>
<script type='text/javascript' src='js/ext.js'></script>
</head>
<body>
<div id="wrapper">
<nav id="nav">
<ul class="list">
<li class="option"><a href="index.html">Home</a></li>
<li class="option"><a href="fanclub-profile.html">Fanclub Profile</a></li>
<li class="option"><a href="#">Events</a></li>
<li class="option"><a href="#">Projects</a></li>
<li class="option"><a href="#">Merchandises</a></li>
<li class="option"><a href="#">Affiliates</a></li>
</ul>
</nav>
<div id="page-wrap">
<div id="info">
</div>
<div class="info-col">
<h2>Chorong</h2>
<a class="image chorong"></a>
<dl>
<dt>Description</dt>
<dd>Chorong is the leader of Apink. She loves bullying the other members especially Bomi.
Despite being the oldest, she has a distinct childish and angelic voice which melt the hearts of Pink Pandas away.
She described herself as a "Warm Country Girl" but the others didn't agree and instead described her as "Cold".
</dd>
<dt>Birthday</dt>
<dd>March 3, 1991</dd>
<dt>Position</dt>
<dd>Leader, Rap, Vocal</dd>
<dt>Height</dt>
<dd>165 cm</dd>
<dt>Weight</dt>
<dd>46 kg</dd>
<dt>MV/CF/Drama</dt>
<dd><ul style="list-style:none">
<li><h4>MV:</h4></li><br/>
<li>BEAST - Shock (Japanese Ver.)</li>
<li>BEAST - Beautiful</li>
<li>Btob - Insane</li><br/>
<li><h4>CF:</h4></li><br/>
</li>BEAST - BBQ</li><br/><br/>
<li><h4>Drama:</h4></li><br/>
<li>All My Love</li>
</ul>
</dd>
<dt>Skills</dt>
<dd>Dancing, Singing, Acting, Hapkido</dd>
<dt>Nickname</dt>
<dd>RongMama, RongLeader</dd>
</dl>
</div>
<div class="info-col">
<h2>Bomi</h2>
<a class="image bomi"></a>
<dl>
<dt>Description</dt>
<dd>Bomi is the main dancer of Apink. She is considered as Apink's "Atmosphere Maker" because of her funny jokes and actions.
She loves imitating others especially animals. According to others, her personality is laidback and boyish.
</dd>
<dt>Birthday</dt>
<dd>August 13, 1993</dd>
<dt>Position</dt>
<dd>Main Dancer, Rap, Vocal</dd>
<dt>Height</dt>
<dd>163 cm</dd>
<dt>Weight</dt>
<dd>45 kg</dd>
<dt>MV/CF/Drama</dt>
<dd><ul style="list-style:none">
<li><h4>MV:</h4></li><br/>
<li>BEAST - Beautiful</li>
</ul>
</dd>
<dt>Skills</dt>
<dd>Dancing, Singing, Taekwondo, Imitating Animals</dd>
<dt>Nickname</dt>
<dd>YoonRilla</dd>
</dl>
</div>
<div class="info-col">
<h2>Eunji</h2>
<a class="image eunji"></a>
<dl>
<dt>Description</dt>
<dd>Eunji is Apink's Main Vocalist. She came from Busan that's why she's known for her Sattori Accent. From being a vocal trainer,
she switched her dream to be a singer. She described herself as the "Happy Virus" of the group because of her bright and optimistic
personality.
</dd>
<dt>Birthday</dt>
<dd>March 18, 1993</dd>
<dt>Position</dt>
<dd>Main Vocal</dd>
<dt>Height</dt>
<dd>164 cm</dd>
<dt>Weight</dt>
<dd>47 kg</dd>
<dt>MV/CF/Drama</dt>
<dd><ul style="list-style:none">
<li><h4>MV:</h4></li><br/>
<li>Love Day w/ BEAST's Yoseob</li><br/>
<li><h4>Drama:</h4></li><br/>
<li>Respond 1997</li>
</ul>
</dd>
<dt>Skills</dt>
<dd>Dancing, Singing, Acting, Composing, Piano</dd>
<dt>Nickname</dt>
<dd>2nd Lizzy, Sattori Idol</dd>
</dl>
</div>
<div class="info-col">
<h2>Naeun</h2>
<a class="image naeun"></a>
<dl>
<dt>Description</dt>
<dd>Naeun is the Apink's Center because she is at the middle according to the members' age order. She's also known as the face
of the group and she already had several MV and Drama appearances. She described herself as calm and quiet. She's not the type of
person who talks to someone first.
</dd>
<dt>Birthday</dt>
<dd>February 10, 1993</dd>
<dt>Position</dt>
<dd>Vocal, Lead Dancer, Face of the Group</dd>
<dt>Height</dt>
<dd>165 cm</dd>
<dt>Weight</dt>
<dd>46 kg</dd>
<dt>MV/CF/Drama</dt>
<dd><ul style="list-style:none">
<li><h4>MV:</h4></li><br/>
<li>BEAST - Soom</li>
<li>BEAST - Beautiful</li>
<li>BEAST - I Like You the Best</li>
<li>Huh Gak - The Person Who Loved Me Once</li><br/>
<li></li>
<li><h4>Drama:</h4></li><br/>
<li>Salamander Guru</li>
<li>The Great Seer</li>
</ul>
</dd>
<dt>Skills</dt>
<dd>Dancing, Singing, Acting, Drawing</dd>
<dt>Nickname</dt>
<dd>GoToNyuh (Sweet Potato and Tomato Girl)</dd>
</dl>
</div>
<div class="info-col">
<h2>Yookyung</h2>
<a class="image yookyung"></a>
<dl>
<dt>Description</dt>
<dd>Yookyung is a member who fully speaks and understands English since she lived in America when she was young.
Her family is known for being rich, though she doesn't want to be known for it. She became an idol because she wants
to be known for her talents. Namjoo described her as a walking alarm clock because of her proper lifestyle living.
</dd>
<dt>Birthday</dt>
<dd>September 22, 1993</dd>
<dt>Position</dt>
<dd>Vocal</dd>
<dt>Height</dt>
<dd>167 cm</dd>
<dt>Weight</dt>
<dd>48 kg</dd>
<dt>MV/CF/Drama</dt>
<dd><ul style="list-style:none">
<li><h4>MV:</h4></li><br/>
<li>BEAST - Beautiful</li><br/>
<li><h4>CF:</h4></li><br/>
</li>BEAST - BBQ</li>
</ul>
</dd>
<dt>Skills</dt>
<dd>Dancing, Singing, Acting, Violin, Piano, Cooking, Sudoku</dd>
<dt>Nickname</dt>
<dd>Franchesca</dd>
</dl>
</div>
<div class="info-col">
<h2>Namjoo</h2>
<a class="image namjoo"></a>
<dl>
<dt>Description</dt>
<dd>Namjoo is considered to be Apink's "2nd Main Vocalist". She calls herself as a tireless energizer
because she never runs of out energy. She loves imitations and she can speak a little bit of English and
Chinese.
</dd>
<dt>Birthday</dt>
<dd>April 15, 1995</dd>
<dt>Position</dt>
<dd>Rap, Vocal</dd>
<dt>Height</dt>
<dd>165 cm</dd>
<dt>Weight</dt>
<dd>46 kg</dd>
<dt>MV/CF/Drama</dt>
<dd><ul style="list-style:none">
<li><h4>MV:</h4></li><br/>
<li>BEAST - Beautiful</li><br/>
<li><h4>CF:</h4></li><br/>
<li>Peppero</li>
<li>Avon Pink</li>
<li>LG Digital</li>
</ul>
</dd>
<dt>Skills</dt>
<dd>Dancing, Singing, Imitating</dd>
<dt>Nickname</dt>
<dd>Queen of Midnight Snacks</dd>
</dl>
</div>
<div class="info-col">
<h2>Hayoung</h2>
<a class="image hayoung"></a>
<dl>
<dt>Description</dt>
<dd>Hayoung is the Maknae (Youngest Member) of Apink. Due to her matured physical appearance, many people are suspicious of her age.
Hayoung likes interviewing inanimate objects, which is the reason why Eunji calls her “4D”. She is also very good at guessing and
was even given the nickname “The Indian Psychic”.
</dd>
<dt>Birthday</dt>
<dd>July 19, 1995</dd>
<dt>Position</dt>
<dd>Maknae, Vocal</dd>
<dt>Height</dt>
<dd>167 cm</dd>
<dt>Weight</dt>
<dd>46 kg</dd>
<dt>MV/CF/Drama</dt>
<dd><ul style="list-style:none">
<li><h4>MV:</h4></li><br/>
<li>BEAST - Beautiful</li>
</ul>
</dd>
<dt>Skills</dt>
<dd>Dancing, Singing, Magic</dd>
<dt>Nickname</dt>
<dd>4D, The Indian Psychic</dd>
</dl>
</div>
</div>
</body>
</html>
For the CSS, here is the code:
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
html, body {background: #ffdcf0; }
body { font: 14px Tahoma, serif; color: #7e054b; }
#page-wrap { width: 1366px; margin: 0 auto; overflow: hidden; height: 100%; }
.info-col { float: left; width: 190px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }
.image { height: 300px; text-indent: -9999px; display: block; border-right: 1px solid white; }
.chorong { background: url(img/chorong.jpg) center center no-repeat; }
.bomi { background: url(img/bomi.jpg) center center no-repeat; }
.eunji { background: url(img/eunji.jpg) center center no-repeat; }
.naeun { background: url(img/naeun.jpg) center center no-repeat; }
.yookyung { background: url(img/yookyung.jpg) center center no-repeat; }
.namjoo { background: url(img/namjoo.jpg) center center no-repeat; }
.hayoung { background: url(img/hayoung.jpg) center center no-repeat; }
.info-col dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
.info-col dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }
.info-col dt:nth-child(odd) {
background: #ef2065;
}
.info-col dd:nth-child(odd) {
background: #ef2065;
}
.info-col dt:nth-child(even) {
background: #bd0241;
}
.info-col dd:nth-child(even) {
background: #bd0241;
}
.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }
#wrapper {
text-align:left;
background-color: pink;
margin: 0px auto;
width: 1366px;
}
#nav {
text-align:center;
font-family: Cambria, serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;
width: 1366px;
background-color: #ef2065;
padding: 5px;
border: 2px solid #bd0241;
}
#nav li{
list-style:none;
display:inline-block;
margin: 5px;
padding: 5px;
margin: 100 5 5 5;
}
#nav li:hover {
background-color: #930a38;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
a {
padding: 5px;
text-decoration:none;
color: white;
}
a:visited {
color: white;
}
#info {
width: 100px;
}
And then here is the jQuery code:
$(function() {
// Set up variables
var $el, $parentWrap, $otherWrap,
$allTitles = $("dt").css({
padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
"cursor": "pointer" // make it seem clickable
}),
$allCells = $("dd").css({
position: "relative",
top: -1,
left: 0,
display: "none" // info cells are just kicked off the page with CSS (for accessibility)
});
// clicking image of inactive column just opens column, doesn't go to link
$("#page-wrap").delegate("a.image","click", function(e) {
if ( !$(this).parent().hasClass("curCol") ) {
e.preventDefault();
$(this).next().find('dt:first').click();
}
});
// clicking on titles does stuff
$("#page-wrap").delegate("dt", "click", function() {
// cache this, as always, is good form
$el = $(this);
// if this is already the active cell, don't do anything
if (!$el.hasClass("current")) {
$parentWrap = $el.parent().parent();
$otherWraps = $(".info-col").not($parentWrap);
// remove current cell from selection of all cells
$allTitles = $("dt").not(this);
// close all info cells
$allCells.slideUp();
// return all titles (except current one) to normal size
$allTitles.animate({
fontSize: "14px",
paddingTop: 5,
paddingRight: 5,
paddingBottom: 5,
paddingLeft: 5
});
// animate current title to larger size
$el.animate({
"font-size": "20px",
paddingTop: 10,
paddingRight: 5,
paddingBottom: 0,
paddingLeft: 10
}).next().slideDown();
// make the current column the large size
$parentWrap.animate({
width: 320
}).addClass("curCol");
// make other columns the small size
$otherWraps.animate({
width: 140
}).removeClass("curCol");
// make sure the correct column is current
$allTitles.removeClass("current");
$el.addClass("current");
}
});
$("#starter").trigger("click");
});