Foxy Toggle Widget

Foxy Toggle este destinat widget-urilor.Cu ceva cunostinte in HTML si CSS,se poate modifica dupa bunul plac Copiati codurile de mai jos cu grija. Daca aveti deja instalat jQuery nu mai este necesara instalarea lui!

Javascript
<link href='http://fonts.googleapis.com/css?family=Exo:400,400italic,500,500italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#foxycode-toggle-view li').click(function () { var text = $(this).children('p'); if (text.is(':hidden')) { text.slideDown('100'); $(this).children('span').html('<img src="http://cdn2.iconfinder.com/data/icons/32pxmania/buttons_29.png">'); } else { text.slideUp('100'); $(this).children('span').html('<img src="http://cdn2.iconfinder.com/data/icons/32pxmania/buttons_27.png">'); } }); }); </script>
HTML
<div align="center"> <ul id="foxycode-toggle-view"> <li> <h3> foxycode-Toggle Title</h3> <span><img src="http://cdn2.iconfinder.com/data/icons/32pxmania/buttons_27.png"></span> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p> </li> </ul> </div>
CSS
#foxycode-toggle-view { list-style:none; font-family:arial; font-size:11px; margin:0; padding:0; width:300px; } #foxycode-toggle-view li { margin:10px; position:relative; cursor:pointer; background: url("http://elegantthemes.com/preview/DailyJournal/wp-content/themes/DailyJournal/images/content-bg.png") repeat scroll 0 0 transparent; border: 1px solid #FFFFFF; border-radius: 4px 4px 4px 4px; box-shadow: 0 0 2px 0 #999999, 0 0 5px 0 rgba(0, 0, 0, 0.1) inset; padding: 10px; } #foxycode-toggle-view h3 { margin:0; color: #ff8400 !important; font-family: 'Exo',sans-serif; font-size: 15px; font-weight: 600; } #foxycode-toggle-view span { position:absolute; right:5px; top:3px; color:#ccc; font-size:13px; } #foxycode-toggle-view p { margin:15px 0; display:none; font-family: 'Exo',sans-serif; font-size: 13px; font-style: italic; font-weight: 500; }

• Live Preview