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.

enter image description here

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 21 '14 at 18:26

fnostro

4,531
1
15
23

you're very welcome. Just fyi, I wrapped the pairs of divs with a containing div for readability purposes, they can be removed and you will still have the same effect. – fnostro Mar 21 '14 at 19:32

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

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.

edited May 23 '17 at 12:14

Community

1
1

answered Mar 21 '14 at 18:36

Beauvais

2,149
4
28
63

Thanks for reply (fnostro as well) however, my problem is there is about 20 items like
.... etc – Mar 21 '14 at 19:17

score 0 · Accepted Answer · answered Mar 21 '14 at 19:15

0

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

answered Mar 21 '14 at 19:15

Soundar

2,569
1
16
24

dear @soundar-r. Thank you again for wonderful code but unfortunately your code makes everything( esp. images) 150px height inside of child div. Also i have checkbox in the parent div moves about 150px below when i move my mouse over checkbox. Any idea how to fix this? Because code works excellent if there is ONLY text in it(both parent and child div) – Mar 26 '14 at 04:42
I have updated the structure as your wish. Please check [**here**](http://fiddle.jshell.net/soundar24/6CryG/). I have updated the details in the next answer. – Soundar Mar 26 '14 at 18:42
Dear Soundar-r. Would you be upset if i disturb you again? IE doesn't show correctly, all child areas are about 40px left indent and about 20px hidden in bottom. Also Always visible area has 10px from top. Not sure how to fix it for IE. Thanks for your help again. – Apr 08 '14 at 16:54
Hi yener, can you say which version of IE browser you have used.? and can you update a code snippet or fiddle to check your issue.. because i have tested in IE10, IE11 where it works fine.. – Soundar Apr 09 '14 at 11:00
Dear Soundar-r. I am terribly sorry for wrong alert. I figured it out. The problem was div width was not enough. So, i make enough room for div which inside of Parent div, now works excellent. Please forgive me for wrong alarm. – Apr 10 '14 at 14:15

score 0 · Answer 4 · answered Mar 26 '14 at 18:48

0

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.

answered Mar 26 '14 at 18:48

Soundar

2,569
1
16
24

you are great person. thank you so much again. I really appreciated for your help – Mar 27 '14 at 13:57

Show hide multiple div

4 Answers4