Question

I’ve a page with many divs that shown products (title and description) but description is hidden and when click in title, description has slideToggle effect

DIVS HTML

<first><h4>Product1</h4></first>
<span><div><ocultar>Description</ocultar></div></span>

<second><h4>Product2</h4></second>
<span><div><ocultar2>Description</ocultar></div></span>

....
...
...
And third, fourth, etc...

And I want a function that optimize this functions in unique function..

$("ocultar").slideToggle("slow");
$("first").click(function () {
    $("ocultar").slideToggle("slow");
});
$("ocultar2").slideToggle("slow");
$("second").click(function () {
    $("ocultar2").slideToggle("slow");
});
...
...
...

I hope can help me!

Answer 1

What you could do is add a class attribute to your elements and that will make it easier to manipulate with jQuery.

<div class="title"><h4>Product1</h4></div>
<div class="description"><ocultar>Description</ocultar></div>

<div class="title"><h4>Product1</h4></div>
<div class="description"><ocultar>Description</ocultar></div>

This jQuery will now attach itself to each click event on the element with the title class attribute and display the closest div with the description class attribute.

// jQuery 1.7+

$(".title").on('click',function(){
  $(this).next('div.description').slideToggle("slow");
});

Demo