css - replace content/icon when jquery accordion is active/open -
i'm trying replace + sign - when accordion active/open, got stuck doing it. @ moment i'm trying css :after
if have better ideas, please share!
html
<ul id="mobile-accordion-container"> <li> <h2 class="title">heading 1</h2> <div class="mobile-content"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus dapibus varius urna, ac venenatis arcu convallis consequat. in augue est, posuere auctor facilisis varius, dictum ac risus. donec nibh justo, aliquam sed tempus quis, lobortis sed orci. aliquam condimentum, erat eget luctus commodo, mauris velit porta nulla, cursus placerat lectus tortor ac enim. phasellus scelerisque luctus ligula, consequat orci posuere rutrum. sed ipsum nisi, ullamcorper eget fermentum a, dignissim sed dolor. nam arcu nulla, aliquam non molestie vitae, condimentum @ lorem. nam et consectetur augue.</p> </div> </li> <li> <h2 class="title">heading 2</h2> <div class="mobile-content"> <p>vivamus id elementum risus. in sit amet mi nulla, ac sollicitudin odio. phasellus laoreet leo vitae velit lobortis @ condimentum odio placerat. nam sapien eros, accumsan id porttitor a, commodo ut urna. cras dignissim metus quis enim placerat lobortis.</p> <p>nam arcu nulla, aliquam non molestie vitae, condimentum @ lorem. nam et consectetur augue. phasellus varius ligula ac dui porta ullamcorper. aliquam nunc sapien, hendrerit @ adipiscing vel, ornare @ justo. nam vitae velit aliquet erat fringilla imperdiet. phasellus diam urna, consectetur sit amet lacinia at, consequat non neque.</p> </div> </li> <li> <h2 class="title">heading 3</h2> <div class="mobile-content"> <p>phasellus scelerisque luctus ligula, consequat orci posuere rutrum. sed ipsum nisi, ullamcorper eget fermentum a, dignissim sed dolor. mauris viverra pretium ante, eu mollis nisi volutpat quis. nunc neque erat, pharetra in feugiat eget, faucibus id sem. vivamus id elementum risus. in sit amet mi nulla, ac sollicitudin odio. phasellus laoreet leo vitae velit lobortis @ condimentum odio placerat. nam sapien eros, accumsan id porttitor a, commodo ut urna. cras dignissim metus quis enim placerat lobortis.</p> </div> </li> </ul>
css
.mobile-content { display:none; } #mobile-accordion-container li { position:relative; list-style-type: none; } h2.title { font-size: 1.3em; font-weight: normal; margin: 0; padding: 15px; text-align: left; font-family: georgia; display:block; cursor: pointer; } h2:after { content: "+"; display: block; font-size: 1em; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#9d9999),color-stop(100%,#363636)); background: -webkit-linear-gradient(top,#9d9999,#363636); background: -moz-linear-gradient(top,#9d9999,#363636); background: -ms-linear-gradient(top,#9d9999,#363636); background: -o-linear-gradient(top,#9d9999,#363636); background: -webkit-gradient(linear,0 100%,0 0,from(#363636),to(#9d9999)); color: #fff; border: 0; border-radius: 50%; height: 15px; position: absolute; right: 15px; width: 15px; text-align: center; top: 15px; line-height: 12px; }
js
$(document).ready(function(){ $('#mobile-accordion-container .title').click(function(e){ e.preventdefault(); $(this).closest('li').find('.mobile-content').not(':animated').slidetoggle(); }); });
try this: http://jsfiddle.net/9lc7f/1/
has new class in css.
$('#mobile-accordion-container .title').click(function(e){ e.preventdefault(); if($(this).hasclass('active')){ $(this).removeclass('active'); }else{ $(this).addclass('active'); } $(this).closest('li').find('.mobile-content').not(':animated').slidetoggle(); });
Comments
Post a Comment