Hi guys u have a problem, i need to make 2 levels accordion but i have a problem, when i click this same place 2 times it expand. Can u change javascrpit to block expanding when i click this same place on list ? Here is my code, sry for bad english, i hope u will understand me.
HTML with javascript
CSSCode:<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl"> <head> <title>Javascript</title> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("a.stopien").each(function(){ $(this).click(function(){ $(".zawartosc").each(function(){ $(this).hide("fast"); }); $("#"+$(this).attr("title")).show("fast"); }); }); }); $(function(){ $("a.ponizej").each(function(){ $(this).click(function(){ $(".ponizejzaw").each(function(){ $(this).hide("fast"); }); $("#"+$(this).attr("title")).show("fast"); }); }) ;}); </script> </head> <body> <div class="akordeon"> <a id="powrot" class="stopien">Powrot</a> <a class="stopien" title="1stopien">Pierwsza lista</a> <div class="zawartosc" id="1stopien"> <ul> <li> <a class="ponizej" href="#" title="1ponizej">Poziom 1</a> <div class="ponizejzaw" id="1ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li> <a class="ponizej" href="#" title="2ponizej">Poziom 1a</a> <div class="ponizejzaw" id="2ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li> <a class="ponizej" href="#" title="3ponizej">Poziom 1b</a> <div class="ponizejzaw" id="3ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li> <a class="ponizej" href="#" title="4ponizej">Poziom 1c</a> <div class="ponizejzaw" id="4ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li> <a class="ponizej" href="#" title="5ponizej">Poziom 1d</a> <div class="ponizejzaw" id="5ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> </ul> </div> <a class="stopien" title="2stopien">Druga lista</a> <div class="zawartosc" id="2stopien"> <ul> <li> <a class="ponizej" href="#" title="6ponizej">Poziom 1</a> <div class="ponizejzaw" id="6ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li> <a class="ponizej" href="#" title="7ponizej">Poziom 1a</a> <div class="ponizejzaw" id="7ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li><a class="ponizej" href="#" title="8ponizej">Poziom 1b</a> <div class="ponizejzaw" id="8ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> </ul> </div> </div> </body> </html>
Code:* { margin: 0; padding: 0; } a { color: black; text-decoration: none; border: 1px solid black; background: silver; color: blue; } .akordeon { width: 200px; margin: 100px 0 0 300px; text-align: center; } .stopien { display: block; padding: 8px 0 8px 15px; cursor: pointer; color: lightblue; font: 10pt 'Verdana'; background: gray; } .zawartosc { display: none; } ul { width: 100%; display: block; list-style: none; } ul li a { width: 173px; display: block; padding: 8px 0 8px 25px; font: 8pt 'Arial'; } ul li a:hover { color: red; width: 170px; padding: 8px 0 8px 30px; } .ponizej { display: block; cursor: pointer; } #1podstopien ul { width: 100%; display: block; } #1podstopien ul li a, #2podstopien ul li a{ width: 155px; display: block; padding: 8px 0 8px 45px; background: #848484; font: 7pt 'Tahoma'; } .ponizejzaw{ display: none; background: black; padding-left: 20px; }
Reply With Quote
Bookmarks