I have been working on a site for a photography portfolio and I have designed custom breakpoints so that there is a desktop version of the homepage for the site with 4 columns with IX2 3d interactions, and then for all the touch devices those columns disappear and the user will see an accordion - if in portrait mode it will be horizontal and in landscape mode it will be vertical.
I have tried to get accordion animated with interactions - and this is semi successfull, but then I stumbled on this clonable project that has a simple jquery accordion
in essence you have all divs in a âclosedâ state and the you add open combo class for each horizontal or vertical div as needed - the code is simple:
and I add it into the custom code section of the page - works perfectly⌠but this is where I get into a problem - I want to add a textblock inside each âverticalâ div that will also have an open comboclass - âopentextâ so that when the div goes into âopenâ mode also its nested textblock goes into the opentext mode⌠so i tried to achieve it by adding the following to each of the .click functions :
$(â#text2â).toggleClass(âopentextâ)
$(â#text1â).removeClass(âopentextâ)
$(â#text3â).removeClass(âopentextâ)
$(â#text4â).removeClass(âopentextâ)
So without seeing the code on the site I am just guessing to a degree but Iâll give it a shot. You need to nest those toggle classes inside of your click event function, from what you posted it looks like they are just on their own with no event to actually fire the toggle.
In general this code could be much simpler with a single class on each element.
While it may in fact be working that way, the code I posted is a) much more extensible and will work no matter how many accordions you have and b) is much simpler and c) is much smaller and thus adds less weight to the page. I believe it will work and will make your life easier, I just need to see if there are any console issues with it on a published page.
Edit: not trying to belittle your efforts, but I think this code will be much easier to manage for you in the future!
@sam-g I really appreciate your help - but I donât know JS at all and i am figuring it out simply by trial and error, and as it stands while your code is in all likelihood better, it is harder for me to write/modify as I donât fully understand it.
vis-a-vis changing all the vertical divâs to be the same - it would be easier but then I would have to add an additional comboclass to make each one different⌠wouldnât this make it more cumbersome?
@IVG totally get it, and there are definitely multiple ways to get to the same place so good job with your initial code!
That being said I did find the issue in mine, had some rich text quote characters when typing in this window that are invalid in jQuery. I wanted to solve it for my own sake as well.
If you are still interested, this will add the classes to the div that was clicked and then remove it from every element that is not the clicked element, you shouldnât need any additional classes, just the one class of vertical on each of your items:
(btw - I needed to change the âaddClassâ to âtoggleClassâ so that second click closes the accordion)
but the problem that I have now is while the accordion opens and closes, the inside elements donât get triggered⌠I am going crazy here and I donât understand why!
If you could post your live page again that would be great, the old one seems to 404, but in your code above you need to add â.âs to the find method, like this: