Show hide multiple div

Question

I have multiple div tags which is line up like ordered list and show only titles when page onload.

I want to show hidden area but 1 - Hidden text expand/collapse when OnMouseOver and OnMouseOut 2 - Hidden text stay visible when click on that div

i really appreciate for any help, i have spend my whole day to find something useful but non-of them worked.

Answer 1

I think you need a accordion like structure.. Please check this Fiddle , this might helps you..

Answer 2

It is not possible to hover a hidden element - there is nothing the .hover() can bind to.

opacity seems to be a solution - see e.g. this other Stack Exchange question, Hover over a hidden element to show it

Try this:

$('#hidden').on({
    mouseover: function() {
        $(this).fadeTo(1,1);
    },mouseleave: function() {
        $(this).fadeTo(1,0);
    },click: function() {
        $(this).off('mouseleave');
    }
});

See Fiddle demo (spinoff from @fnostro). My source was from here.

Answer 3

If you can use jquery - it's very easy.

HTML for simple accordion:

<div id="Accordion">
    <div>
        <div class="Title">Visible</div>
        <div class="Boxen">Hidden</div>
    </div>
    <div>
        <div class="Title">Visible</div>
        <div class="Boxen">Hidden</div>
    </div>
</div>

CSS:

.Title {
    width:400px;
    height:30px;
    background-color:green;
}
.Boxen {
    width:400px;
    height: 150px;
    background-color:pink;
    display: none;
}

Jquery:

$(".Title").hover(function () {
    $(this).next(".Boxen").slideToggle();
});

FIDDLE

EDIT: Updated fiddle to show simple accordion

Answer 4

I have updated another Fiddle here, which is the most suitable structure for your application.

Here the any number of blocks can be added with the class name block. And each block should contain one parent element and child element. In parent put your title or summary and in child put your contents. You can also modify this structure as per your requirement.