Problem in simple accordion effect in paragraphs

Question

Problem in simple accordion effect in paragraphs

Navigation

#1 by (1 votes)

1

Is this feasible? Or do they 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");
    });
});

javascript jquery css

asked by anonymous 28.03.2014 / 20:51

1 answer

jQuery Mobile: page events Handle webcontrol element dynamically

score 1 · Accepted Answer

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 he left. Using the .next () you can select only the next sibling

To use the more traditional accordion effect you can use:

$(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
    });
});