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; } | Play with Code on Codepen |
Tell Me What You Think
The gadget spec URL could not be found