I have a loop which outputs the following content...

<div class="item-title"><a href="">Title here</a></div>
   <div class="item-content">
      <div class="item-body">
      Body Here
      </div>
   </div>
</div>

I want to HIDE .item-content on page load.

When you click the title, it should SHOW .item-content

When you click the title again, it should HIDE .item-content

The problem is that as my query loops through, it assigns EVERY article a class of .item-content so EVERY article opens and closes together.

How do I make it show each title ONLY opens the corresponding content and not every piece of article content?

I have a loop which outputs the following content...

<div class="item-title"><a href="">Title here</a></div>
   <div class="item-content">
      <div class="item-body">
      Body Here
      </div>
   </div>
</div>

I want to HIDE .item-content on page load.

When you click the title, it should SHOW .item-content

When you click the title again, it should HIDE .item-content

The problem is that as my query loops through, it assigns EVERY article a class of .item-content so EVERY article opens and closes together.

How do I make it show each title ONLY opens the corresponding content and not every piece of article content?

• javascript
• jquery
• show-hide

5 Answers 5

You can try using this solution, as you can see below, using $(this) can solve you problem. As i read your question, you want to display the content without going/redirect to another page after click anchor link, then you should prevent it from redirect by adding e.preventDefault(); code. Hope this help:

$('.item-content').hide();
$(document).on('click','.item-title', function(e){
   e.preventDefault();
   $(this).next('.item-content').toggle();
});

Jsfiddle Link

Working example

You can find the correct element to hide/show using the find() method:

$('.item-title').click(function () {
    var content = $(this).find('.item-content');

    content.toggle();
}

You can hide the content, then set up a handler on the titles to open the corresponding content item inside it:

$('.item-content').hide();
$('.item-title')
   .on('click',function(e) {
      $(this).find('.item-content').toggle();
    });

http://jsfiddle/jLx12rx8/ Jquery:

$('.item-title').on('click',function(e){
    e.preventDefault();
    $(this).children('.item-content').toggle();    
});

html:

<div class="item-title"><a href="">title</a>
   <div class="item-content">
      <div class="item-body">
      Body Here
      </div>
   </div>
</div>

css:

.item-content {
    display:none;
}

I assumed the content was meant to be a child of the title node as you didn't specify how a title and content node are meant to be linked.

EDIT: new jsfiddle with a node http://jsfiddle/jLx12rx8/2/

Try this:

$(document).ready(function () {
    //Initially hide all the item-content
    $('.item-content').hide();

    // Attach a click event to item-title
    $('.item-title').on('click', function () {
        //Find the next element having class item-content
        $(this).next('.item-content').toggle();
    });
});

Fiddle : http://jsfiddle/1wjpohkf/1/