Simple CSS Only Horizontal Accordion Slider

How to Build a Horizontal Accordian for Ning

Last week a client asked me how difficult it would be to create a simple accordion style slider for featured content on their Ning network. We ended up going with something different, but the result I came up with is still very useful and easy to implement into your Ning 3.0 Network. This is what we are creating.

Step One: Add the Following Code to a Text Box

<form>

<ul>

<li>

<input id="rad1" type="radio" name="rad">

<label for="rad1">1</label>

<div class="jfslide">

<h2>Slide 1</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>

<img src="http://lorempixum.com/420/200/city/1" alt="">

</div>

</li>

<li>

<input id="rad2" type="radio" name="rad">

<label for="rad2">2</label>

<div class="jfslide">

<h2>Slide 2</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>

<img src="http://lorempixum.com/420/200/city/2" alt="">

</div>

</li>

<li>

<input id="rad3" type="radio" name="rad">

<label for="rad3">3</label>

<div class="jfslide">

<h2>Slide 3</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>

<img src="http://lorempixum.com/420/200/city/3" alt="">

</div>

</li>

</ul>

</form>

Step Two: Add the Following CSS to Design Studio

/*BASIC*/

* {

margin: 0;

padding: 0;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

body {

background: #eee;

}

/*HEADER*/

.header {

height: 25px;

background: #222;

color: #eee;

text-align: center;

font: 10px/25px Helvetica, Verdana, sans-serif;

}

.header a {

color: #999;

}

/*LIST*/

ul {

list-style: none;

}

/*FORM*/

form {

margin: 50px;

}

input {

position: absolute;

top: -9999px;

left: -9999px;

}

label {

display: block;

height: 330px;

width: 50px;

background: #999;

text-align: center;

font: 14px/50px Helvetica, Verdana, sans-serif;

margin-bottom: 10px;

float: left;

overflow: hidden;

-webkit-transition: width 1s ease, background 0.5s ease;

-moz-transition: width 1s ease, background 0.5s ease;

-o-transition: width 1s ease, background 0.5s ease;

-ms-transition: width 1s ease, background 0.5s ease;

transition: width 1s ease, background 0.5s ease;

}

#rad2 + label {

background: #888;

-webkit-transition: width 1s ease, background 0.5s ease;

-moz-transition: width 1s ease, background 0.5s ease;

-o-transition: width 1s ease, background 0.5s ease;

-ms-transition: width 1s ease, background 0.5s ease;

transition: width 1s ease, background 0.5s ease;

}

label:hover, #rad2 + label:hover {

background: #232323;

color: #fff;

cursor: pointer;

}

/*SLIDES*/

.jfslide {

color: #333;

display: block;

height: 330px;

width: 0px;

background: #fff;

font: 12px/1.5 Helvetica, Verdana, sans-serif;

padding: 10px 0;

float: left;

overflow: hidden;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.jfslide p, h2, img {

width: 420px;

padding-left: 10px;

}

.jfslide img {

margin-top: 10px;

}

input[type="radio"]:checked+label ~ .jfslide {

width: 450px;

}