jQuery slideToggle()

JavaScript
1

Hey,

I’m having a problem with toggling certain links, if a link is clicked. I don’t know why, and I have no idea about jQuery, but somehow whenever I click on a link, it displays all of them.

The problem: http://doughboys.zxq.net/code/nav.php#

“Start” should be the link that is clicked, and toggles the link within this links only.

I would be glad if someone could help me resolving my problem. :slight_smile:

2

The code you have would work but jQuery is really niffty when it comes to multiple elements. Try this

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        
        $(this).find('ul').slideToggle(1);
        $(this).toggleClass("active");
        return false;
    });
});
</script>

<ul>
    <li class="toggler"><a href="#">Start</a>
        <ul style="display: none;">
            <li><a href="#"><span>Blub</span></a></li>
            <li><a href="#"><span>Blub</span></a></li>
            <li><a href="#"><span>Blub</span></a></li>
        </ul>
    </li>
    <li class="toggler"><a href="#">Start</a>
        <ul style="display: none;">
            <li><a href="#"><span>Blub</span></a></li>
            <li><a href="#"><span>Blub</span></a></li>
            <li><a href="#"><span>Blub</span></a></li>
        </ul>
    </li>
</ul>
3

This one doesn’t work at all, I’ve found another example, and an example to my what I’ve made, but seems like mine doesn’t work, and I have problems with the $(this) next, etc.

      <link rel="stylesheet" type="text/css" href="css/navigation.css" />
      <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
      <script type="text/javascript">  
      $(document).ready(function(){ 	
      $('#nav ul li .subnav').hide(); 	
      $('#nav ul li a').click(function(){ 		
      $(this).next('#nav ul ').slideToggle('fast'); 	
        }); 
      }); 
      </script>

<div id="nav"> 
         <ul>
         <li><a href="#"><b>Startseite</b></a></li>
         </ul>
         <ul>
           <li class="subnav"><a href="#"><span>Blub</span></a></li>
           <li class="subnav"><a href="#"><span>Blub</span></a></li>
           <li class="subnav"><a href="#"><span>Blub</span></a></li>
           <li class="subnav"><a href="#"><span>Blub</span></a></li> 
           </ul>
</div>
4

Im not following, i helped you by posting a code that does work but you have come back and given a completely new code and i don’t understand why