SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using toggle jquery with list

    I am trying to make this list of cd's work. The letters will have the bands listed under them and then when each band will be clicked on a selection of albums by them will appear.

    I've so far managed to make all of them appear when it is clicked but can't seem to make only albums for those bands appear they all do.

    My Javascript:
    Code JavaScript:
    $(document).ready(function(){
     
    $(".header3").hide();
     
      $(".header2").click(function(){
        $this.parent().next(".header3").toggle(slow);
        return false;
      });
    });

    My CSS:
    Code CSS:
    .header 
    {position: absolute;
     top: 24em;
     left: 25%;
     margin: 0;
     padding: 0;
     list-style-type: none;
    }
     
    .header li
    { list-style-type: none;
    }
     
    .header li a
    {color: white;
     font-size: 1.2em;
    }
     
    .header .header2 li
    {list-style-type: none;
    }
     
    .header .header2 a
    {color: white;}
     
    .header .header2 .header3 li
    {list-style-type: none;
    }
     
     
    .header .header2 .header3 a
    {color: blue;}

    My HTML (extract of it):
    Code HTML4Strict:
    <ul class="header">
    <li><a name="a">A</a>
    <ul class="header2">
    	<li><a href="#">A Perfect Circle</a>
    		<ul class="header3">
    			<li><a href="http://www.amazon.co.uk/Thirteenth-Step-Perfect-Circle/dp/B0000AZJXQ/ref=sr_1_2?ie=UTF8&qid=1302651762&sr=8-2">13th Step</a></li>
    			<li><a href="http://www.amazon.co.uk/Mer-Noms-Perfect-Circle/dp/B00004T99Z/ref=sr_1_1?ie=UTF8&qid=1302651762&sr=8-1">Mer De Noms</a></li>
    		</ul>
    	</li>
    </ul>
    <ul class="header2">
    	<li><a href="#">AC:DC</a>
    	<ul class="header3">
    		<li><a href="#">Live</a></li>
    	</ul>
    	</li>
    </ul>
    </li>

    Thanks in advance

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try simply changing

    Code JavaScript:
    $this.parent().next(".header3").toggle(slow);

    to

    Code JavaScript:
    $(this).parent().next(".header3").toggle("slow");

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    This is the line to focus on.

    Code:
    $this.parent().next(".header3").toggle(slow);
    The $this keyword doesn't exist. I think you might mean $(this) instead

    Code:
    $(this).parent().next(".header3").toggle(slow);
    The slow part has to be a string, not a variable

    Code:
    $(this).parent().next(".header3").toggle('slow');
    And now you need to traverse the DOM properly.
    The parent part takes you from the clicked A element to the LI element. The next part fails, because the LI element has no other siblings.

    Instead, what would work is to not use the parent part, but my preferred solution is to use a context selector instead, where you select .header3 from within the context of the clicked link.

    Code:
    $('.header3', this).toggle('slow');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you sooo much! That's perfect. It's my first website so got a lot to learn still.

  5. #5
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I could just ask something else as only just realized it didn't work. The part of the lsit that opens has to link to open a new window.

    li><a href="http://www.amazon.co.uk/Thirteenth-Step-Perfect-Circle/dp/B0000AZJXQ/ref=sr_1_2?ie=UTF8&qid=1302651762&sr=8-2" target="_blank">13th Step</a></li>

    I put that cause target black sohuld open it but all clicking dows is close it up again. I know I can remove return false; from the javascript but this causes the page to jump back up to beginning which I don't want it to do.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    One possible solution is add on to the existing click function, so that you check if the target element is an anchor tag, and only if it's not do you return false.

    That complicates the function more than it necessarily should be though, so instead a second preferred solution is to remove the target attribute (it's invalid anyway when using strict mode) and to instead attach a separate function on to links you want to open in a new window.

    Here, we will look for all links in the header section, and those that start with "http://" we'll attach on to them the a new window function.

    Code javascript:
    $('a[href^="http://"]', '.header').click(newWindow);

    That new window function is quite simple, being:

    Code javascript:
    function newWindow() {
        window.open(this.href);
        return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!


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
  •