This week's book giveaways are in the Java EE and JavaScript forums.
We're giving away four copies each of The Java EE 7 Tutorial Volume 1 or Volume 2(winners choice) and jQuery UI in Action and have the authors on-line!
See this thread and this one for details.
The moose likes HTML, CSS and JavaScript and the fly likes creating an accordion using pure javascript and css for IE Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "creating an accordion using pure javascript and css for IE" Watch "creating an accordion using pure javascript and css for IE" New topic
Author

creating an accordion using pure javascript and css for IE

s ravi chandran
Ranch Hand

Joined: Dec 20, 2010
Posts: 154
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



CSS



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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61092
    
  66

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


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
s ravi chandran
Ranch Hand

Joined: Dec 20, 2010
Posts: 154
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
Ranch Hand

Joined: May 14, 2004
Posts: 512
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
Ranch Hand

Joined: Dec 20, 2010
Posts: 154
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61092
    
  66

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
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 295
    
    5

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:

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.


Read my books: Hello! HTML5 & CSS3 | HTML5 in Action | Read my blog
s ravi chandran
Ranch Hand

Joined: Dec 20, 2010
Posts: 154
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:

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..
 
wood burning stoves
 
subject: creating an accordion using pure javascript and css for IE