Scroll selected Heading to top in expandable/collapsible list contained in absolute scrollable div
Hi,
I have a expandable/collapsible list just like the one featured in jsfiddle.net/489Y2/6/. This code only allows for one item to be expanded at a time. I want to change its code so that more than one item can remain opened at a time.
Secondly, this code starts and scrolls the selected Heading to the top of the browser window. I am trying to contain this code in an absolute div and position it in between a fixed header (height 200px) and a fixed footer (height 50px) and still keep the same scrolling effect. When I do so, I lose the scrolling effect. It scrolls the Heading all the way down the div or somewhere in the midst of the scrollable div region.
I feel my understanding of scrollTop, offset etc. is wrong. I prefer not to use jQuery plugins until I have a good understanding of javascript. Could someone please correct my mistakes or show me a working example that I can learn from. Thank you.
- <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
body {height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;}
#head {position:absolute;
margin:0;
top:0;
left:0;
display:block;
width:100
height:200px;
background:url(fish.jpg) rgb(233,238,242);
background-repeat:no-repeat;
font-size:4em;
z-index:5;
color:#fff;}
#foot {position:absolute;
margin:0;
bottom:0;
left:0;
display:block;
width:100%;
height:50px;
background:rgb(233,238,242);
font-size:0.8em;
z-index:5;
text-align:right;
color:rgb(157,78,84);}
#stores, #abc {position: absolute;
left:0;
top:200px;
bottom:50px;
width:50%;
font-size:1em;
z-index:4;
overflow:auto;}
.details {
display: none;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(".aro > .wrap").click(function () {
if (!$(this).parent().hasClass("active")) {
//$(".aro").removeClass("active");
$(this).parent().addClass("active");
$(this).parent().children(".details").slideDown("slow", function() {
$('html, body').animate({
scrollTop: $(this).parent().offset().top
}, 2000);
});
} else {
$(this).parent().removeClass("active");
$(this).parent().children(".details").slideUp("slow");
}
});
});//]]>
</script>
</head>
<body>
<div id="abc">
<div class="aro">
<div class="wrap">
<h2>Headline</h2>
</div>
<div class="details">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="aro">
<div class="wrap">
<h2>Headline</h2>
</div>
<div class="details">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="aro">
<div class="wrap">
<h2>Headline</h2>
</div>
<div class="details">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="aro">
<div class="wrap">
<h2>Headline</h2>
</div>
<div class="details">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="aro">
<div class="wrap">
<h2>Headline</h2>
</div>
<div class="details">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="aro">
<div class="wrap">
<h2>Headline</h2>
</div>
<div class="details">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>
</body>
</html>