Problem in effect acordion simple in paragraphs

Question

Is this practicable? Or have any suggestions without jQuery UI plugins?

HTML CODE:

<div class="minhaclasse">
<p class="titulo">Título<br>resumo<br></p>
<p class="outros"> texto de descrição </p>
</div>
<div class="minhaclasse">
<p class="titulo">Título<br>resumo<br></p>
<p class="outros"> texto de descrição </p>
</div>

CSS CODE:

p.titulo{ cursor: pointer}
p.outros{display:none}

jQuery Code:

$(document).ready(function(){
    $(".titulo").mouseover(function(){
        $(this).siblings(".outros").css("display", "block");
    });
});

Answer 1

Yes it is possible.

I would do so:

$(document).ready(function () {
    $(".titulo").hover(function () {
        $(this).next().toggleClass("outros");
    }, function () {
        $(this).next().toggleClass("outros");
    });
});

CSS

p.titulo {
    cursor: pointer
}
.outros {
    display:none
}

Example

Using the .Hover() It is possible to have a function for when the mouse is Hover and when it left. Usanto the .next() can select only the next sibling

---

To use the most traditional accordion effect you can use it like this:

$(document).ready(function () {
    $(".titulo").on('click', function () {
        var descricao = $(this).next(); // por o elemento onde está a descrição em cache
        $(".outros").not(descricao).slideUp(); // esconder todos os que possam estar abertos menos o que está junto ao que recebeu clique
        descricao.slideToggle();  // abrir ou fechar consoante estiver aberto ou fechado
    });
});

Example