Win a copy of Modern JavaScript for the Impatient this week in the Server-Side JavaScript and NodeJS forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

creating an accordion using pure javascript and css for IE

 
Ranch Hand
Posts: 590
6
jQuery Java
  • 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
 
Marshal
Posts: 67446
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • 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: 590
6
jQuery Java
  • 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.
 
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: 590
6
jQuery Java
  • 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
Marshal
Posts: 67446
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • 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?
 
author
Posts: 297
5
Android Firefox Browser Fedora
  • 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: 590
6
jQuery Java
  • 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..
 
It is difficult to free fools from the chains they revere - Voltaire. tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic