(simple?) Jquery problem

SnoringFrog · 07-09-2009, 03:21 AM

First off, here's my code:

Code:

<html>
     <head>
          <title>A jQuery Script</title>
          <script src="jquery-1.3.2.js" type="text/javascript" /></script>
           <script type="text/javascript">
              $(document).ready(function(){
				$('ul').hide();
                   $('.closed, .open').click(function(){
                        $('#siteHide').animate({"opacity": "toggle"});
						$(this).toggleClass('closed').toggleClass('open');
                   });				   
              });
          </script>
</head>

     <body>
          <p>
          <a href="#" id="site" class="closed">Site</a>
               <ul id="siteHide">
                    <li>Home</li>
                    <li>About</li>
                    <li>Blog</li>
                    <li>Affiliates</li>
               </ul>
          </p>
          <p>
          <a href="#" id="tutorials" class="closed">Tutorials</a>
               <ul id="tutorialsHide">
                    <li>jQuery</li>
                    <li>PHP</li>
                    <li>Illustrator</li>
                    <li>Paint Shop Pro</li>
               </ul> 
          </p>
          <p>
          <a href="#" id="linksout" class="closed">LinksOut</a>

               <ul id="linksoutHide">
                    <li>Webitect</li>
                    <li>W3.org</li>
                    <li>Google</li>
               </ul>
          </p>
     </body>

</html>

This works just fine, but as you can see it only opens/closes the id "siteHide". What I need to modify this script to do is detect which category is clicked and expand the associated url (basically, I need (this + 'Hide') but that doesn't work in the code). Does anyone know how to do this? I've also tried using this code:

Code:

<html>
     <head>
          <title>A jQuery Script</title>
          <script src="jquery-1.3.2.js" type="text/javascript" /></script>
           <script type="text/javascript">
              $(document).ready(function(){
				$('ul').hide();
                   $('.closed, .open').click(function(){
                        $(this).find('ul').animate({"opacity": "toggle"});
						$(this).toggleClass('closed').toggleClass('open');
                   });				   
              });
          </script>
     </head>

     <body>
          <p class="closed">
          <a href="#" id="site">Site</a>
               <ul id="siteHide">
                    <li>Home</li>
                    <li>About</li>
                    <li>Blog</li>
                    <li>Affiliates</li>
               </ul>
          </p>
          <p class="closed">
          <a href="#" id="tutorials">Tutorials</a>
               <ul id="tutorialsHide">
                    <li>jQuery</li>
                    <li>PHP</li>
                    <li>Illustrator</li>
                    <li>Paint Shop Pro</li>
               </ul> 
          </p>
          <p class="closed">
          <a href="#" id="linksout">LinksOut</a>

               <ul id="linksoutHide">
                    <li>Webitect</li>
                    <li>W3.org</li>
                    <li>Google</li>
               </ul>
          </p>
     </body>

</html>

Iszak · 07-09-2009, 11:00 AM

In theory this will work.

Code:

$('.closed, .open').click(function(){
  $(this).next('ul').animate({opacity: 'toggle'});
  $(this).toggleClass('closed').toggleClass('open');
});

But it won't with your code because un-ordered lists cannot be inside paragraphs, so if you simply remove the paragraph tags and try that it should by all means, work.

The reason why find didn't match it, is because it's looking for elements inside the hyperlink which there is none.

Here's an example of the code working (http://pastebin.me/4a55bf2ac6a4e) - if you have firebug you can also see that the class attribute is also changing.

If you're insistent on having invalid mark-up then the following should work with your current mark-up.

Code:

$('.closed, .open').click(function(){
  $('#'+$(this).attr('id')+'Hide').animate({opacity: 'toggle'});
  $(this).toggleClass('closed').toggleClass('open');
});

But I advise against it.

rosetaylor01 · 07-16-2009, 07:35 AM

The Jquery problem of JavaScript, as with most web development, are almost entirely related to browser compatibility.

While the advances in browser programmability we've seen over recent years are, generally speaking, a good thing, if you don't implement them with care you can create a lot of inconsistencies and broken pages quite unintentionally using JavaScript. Code that works just great on IE4 might not work at all on Netscape 4, what works in NN6 doesn’t always work in NN 4, and so on.

In essence, there are two main problems with JavaScript and browsers:

· The different JavaScript versions in different browsers.

· Browser programmability: the HTML elements and features of the browser that can be accessed through any scripting language. (IE4 , for example, makes most of the page and HTML accessible to scripts, but Navigator 4 limits what can be accessed and manipulated.)

SnoringFrog · 07-28-2009, 05:27 PM

Quote:

Originally Posted by Iszak

In theory this will work.

Code:

$('.closed, .open').click(function(){
  $(this).next('ul').animate({opacity: 'toggle'});
  $(this).toggleClass('closed').toggleClass('open');
});

But it won't with your code because un-ordered lists cannot be inside paragraphs, so if you simply remove the paragraph tags and try that it should by all means, work.

The reason why find didn't match it, is because it's looking for elements inside the hyperlink which there is none.

Here's an example of the code working (http://pastebin.me/4a55bf2ac6a4e) - if you have firebug you can also see that the class attribute is also changing.

If you're insistent on having invalid mark-up then the following should work with your current mark-up.

Code:

$('.closed, .open').click(function(){
  $('#'+$(this).attr('id')+'Hide').animate({opacity: 'toggle'});
  $(this).toggleClass('closed').toggleClass('open');
});

But I advise against it.

Oh, I didn't realize that unordered lists couldn't go inside paragraphs. Your code worked perfectly once I fixed that, thanks.