SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast Phyxas's Avatar
    Join Date
    Mar 2010
    Location
    Houston, TX
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery slideToggle()

    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.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The code you have would work but jQuery is really niffty when it comes to multiple elements. Try this

    Code HTML4Strict:
    <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. #3
    SitePoint Enthusiast Phyxas's Avatar
    Join Date
    Mar 2010
    Location
    Houston, TX
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code HTML4Strict:
          <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. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •