creating an accordion using pure javascript and css for IE

[s ravi chandran]

hi,
i need to create an accordion which will work on internet explorer and preferably on other browsers like safari and chrome. I tried searching for some good example, but most of them are using jquery, which I am not supposed to use. I have tried many things, but nothing is working as required. please help me out here. I know what I want as a result, I am just not able to reach there.. This is my target UI:
http://sandbox.scriptiny.com/accordion/

and this is where I have reached currently:

HTML

<div class="panel" id="one" onclick="showBlock(event);">
  <h2>One panel</h2>
  <div class="panelcontent">
	<p>Content goes here 1</p>
	<p>More content</p>
  </div>
</div>

<div class="panel"  id="two" onclick="showBlock(event);">
  <h2>Another panel</h2>
  <div class="panelcontent">
	<p>Content goes here 21</p>
	<p>More content</p>
    <p>More content</p>
  </div>
</div>

<div class="panel" id="three" onclick="showBlock(event);">
  <h2>Initially Collapsed</h2>
  <div class="panelcontent">
	<p>This panel is collapsed by default (until user sets a preference)</p>
  </div>
</div>

CSS

body { font: 12px Tahoma, Geneva, sans-serif; }

/* panel */
.panel, .panelcollapsed
{
	background: #eee;
	margin: 5px;
	padding: 0px 0px 5px;
	width: 300px;
	border: 1px solid #999;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

/* panel heading */
.panel h2, .panelcollapsed h2
{
	font-size: 18px;
	font-weight: normal;
	margin: 0px;
	padding: 4px;
	background: #CCC url(arrow-up.gif) no-repeat 280px;
	border-bottom: 1px solid #999;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
}

/* panel heading on rollover */
.panel h2:hover, .panelcollapsed h2:hover { background-color: #A9BCEF; }

/* heading of a collapsed panel */
.panelcollapsed h2
{
	background: #CCC url(arrow-dn.gif) no-repeat 280px;
	border-color: #CCC;
}

/* panel content - do not set borders or paddings */
.panelcontent
{
	background: #EEE;
	overflow: hidden;
}

/* collapsed panel content */
.panelcollapsed .panelcontent { display: none; }

SCRIPT

<script>
function showBlock(event)
{

var source = event.target || event.srcElement;

source.style.backgroundColor='yellow';


}
</script>

This is an incomplete script, as I have tried few things and lost the original thought which i had. the logic which I have thought of is to add and remove panelcollapsed class when the div heading is clicked. but the issue right now is to get the element. with the current onclick, any object is being returned as source element, which I have tested using change in background color. Is there some wrong logic in what I am doing?

Thanks

[Bear Bibeault]

Why can't you use jQuery? It seems silly to re-invent the wheel needlessly.

[s ravi chandran]

Bear Bibeault wrote:Why can't you use jQuery? It seems silly to re-invent the wheel needlessly.

Well, our project is using old architecture, they have only upgraded the server side code, the client side code is still the same since last many years. And they don't like anyone adding up any framework for the UI. I know with jquery this would have been a matter of just few lines. But this is a project restriction.

[amit punekar]

Hello,
Even if you write your own Java script, you are still changing the client side code, isn't it ?
I believe you should convince them about the benefits you can get by using jQuery or other JS framework.

regards,
amit

[s ravi chandran]

amit punekar wrote:Hello,
Even if you write your own Java script, you are still changing the client side code, isn't it ?
I believe you should convince them about the benefits you can get by using jQuery or other JS framework.

regards,
amit

hi,
well, its not that no one is allowed to write a new script code or backend code. the code is changing most of the time.. we add new modules from time to time. for certain new services... but the only thing is that.. everywhere we use pure HTML, CSS and JavaScript.. That is the limitation.. no use of framework is what they tell us, as the original application has to support many clients and client types.. so they don't wish to have dependencies.. and framework usage in project is not decided so easily.. that is a very rare process with senior and super seniors having a meeting and getting to a conclusion... which I have heard normally doesn't end up that productive mostly..

[Bear Bibeault]

OK, so I realize that this is out of your hands. But how clueless is this:

s ravi chandran wrote:as the original application has to support many clients and client types..

Supporting multiple client types easily is a perfect reason to use jQuery, not to avoid it.

Would it do any good to explain to them that this would have been finished long ago if you were allowed to use modern tools?

[Rob Crowther]

You need to ask them what magical properties they think their development team have that they're going to do a better job of front end web development than the thousands of people who contribute ot jQuery. How are you managing to do server side development without any reliance on frameworks?

As for your immediate problem, I suspect the root of your issue is that the click event is being fired by the h2 element, not the div.panel. Adjust the code so that the onclick is on the h2, then have a showBlock() function more like this:
function showBlock(event) { var source = event.target || event.srcElement; if (source.parentNode.className == 'panel') { source.parentNode.className = 'panelcollapsed'; } else { source.parentNode.className = 'panel'; } }
Here is an example.

Also, you should read up on event bubbling. Just because a handler is attached to a particular element doesn't mean all the events will be raised there.

[s ravi chandran]

Rob Crowther wrote:You need to ask them what magical properties they think their development team have that they're going to do a better job of front end web development than the thousands of people who contribute ot jQuery. How are you managing to do server side development without any reliance on frameworks?

As for your immediate problem, I suspect the root of your issue is that the click event is being fired by the h2 element, not the div.panel. Adjust the code so that the onclick is on the h2, then have a showBlock() function more like this:
function showBlock(event) { var source = event.target || event.srcElement; if (source.parentNode.className == 'panel') { source.parentNode.className = 'panelcollapsed'; } else { source.parentNode.className = 'panel'; } }
Here is an example.

Also, you should read up on event bubbling. Just because a handler is attached to a particular element doesn't mean all the events will be raised there.

Thanks for the heads up. I did manage to find some logic with similar result, but it was way too lengthy. this looks short and concise. And regarding our project management mentality, well they support clients who don't wish to change their client systems. so supporting some of the legacy browsers and client apps certainly has it's downside. anyway, our people could certainly have had encouraged our clients to do some upgradation at their end, so that we could live a bit peacefully while supporting them. but at the end of the day, developers are least bothered in software development, mostly..