Win a copy of Think Java: How to Think Like a Computer Scientist this week in the Java in General forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

creating an accordion using pure javascript and css for IE

 
s ravi chandran
Ranch Hand
Posts: 341
Java jQuery
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64824
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Why can't you use jQuery? It seems silly to re-invent the wheel needlessly.
 
s ravi chandran
Ranch Hand
Posts: 341
Java jQuery
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 544
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 341
Java jQuery
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64824
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 297
5
Android Fedora Firefox Browser
  • Likes 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
s ravi chandran
Ranch Hand
Posts: 341
Java jQuery
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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..
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic