Problem getting jQuery script to work as expected

Question

I am new to jQuery. I want a simple list. I just want to show and hide the additional details.

<ul>
  <li><div onclick="show()"><img src="product_pic" />Product 1</div><div id="details" class="hide">short intro about the product</div></li>
<ul>  

CSS

.hide {display: none;}

jQuery

function show(){
     $(this).next().toggleClass('hide');
}

It is not working. I appreciate any help.

Answer 1

Two things:

1. It's toggleClass, not toggleclass
2. Hook up the event handler using jQuery, rather than using the old-style attributes.

So:

$("div.hide").prev().click(function() {
    $(this).next().toggleClass('hide');
});

Live example

How that works:

• We find the divs that have that "hide" class, and then we find all of their immediate predecessors via prev. That creates a set of all of the divs who are immediately followed by the div.hide divs.
• We hook the click event on the predecessors.
• When the click happens, we toggle the class on the next element after the one that was clicked.

I think I'd recommend you use a separate "details" class or something alongside "hide", in case you want to use "hide" somewhere else that won't have this precise structure. And if you do that, you can show and hide without changing the class; jQuery's smart enough to override the CSS "display: none" bit, even when applied by a rule (not all libs are). That would look like this:

CSS:

.details {
    display: none;
}

Markup:

<li><div><img src="product_pic" />Product 1</div><div class="details">short intro about the product</div></li>

JavaScript:

$("div.details").prev().click(function() {
  $(this).nextAll("div.details:first").toggle();
});

Live example

Note that uses toggle rather than toggleClass.

---

Side note: I note you have id="details" on the details div. Remember that id values must be unique, so if you have more than one of these, you can't use "details" as the id of each of them.

Answer 2

1 . Change "toggleclass" for "toggleClass".
2 . You can try this:

HTML:

<ul>
  <li>
      <div class="show"><img src="product_pic" />Product 1</div>
      <div id="details" class="hide">short intro about the product</div>
  </li>
<ul>

JS:

$('.show').bind('click', function(ev){
     $(this).next('div').toggleClass('hide');
});

CSS

.hide {display: none;}

EDIT

If you're going to have multiple tags "li", you should remove the ID "details" because it would be repeated, and must be unique. your html code could be next:

HTML:

<ul>
  <li>
      <div class="show"><img src="product_pic" />Product 1</div>
      <div class="details hide">short intro about the product</div>
  </li>
  <li>
      <div class="show"><img src="product_pic" />Product 2</div>
      <div class="details hide">other short intro about the product</div>
  </li>
<ul>

OR

<ul>
  <li>
      <div class="show"><img src="product_pic" />Product 1</div>
      <div id="details-prod-1" class="hide">short intro about the product</div>
  </li>
  <li>
      <div class="show"><img src="product_pic" />Product 2</div>
      <div id="details-prod-2" class="hide">other short intro about the product</div>
  </li>
<ul>