Simple Accordion with JS - need help with additional features

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:

<script>
$('#vertical2').click(
	function(){
  	$(this).toggleClass('open')
  	$('#vertical3').removeClass('open')
    $('#vertical4').removeClass('open')
    $('#vertical1').removeClass('open')
  },
)

$('#vertical3').click(
	function(){
  	$(this).toggleClass('open')
	  $('#vertical2').removeClass('open')
    $('#vertical4').removeClass('open')
    $('#vertical1').removeClass ('open')
  },
)

$('#vertical4').click(
	function(){
  	$(this).toggleClass('open')
	  $('#vertical2').removeClass('open')
    $('#vertical3').removeClass('open')
    $('#vertical1').removeClass ('open')
  },
)

$('#vertical1').click(
	function(){
    $(this).toggleClass ('open')
    $('#vertical2').removeClass('open')
    $('#vertical3').removeClass('open')
    $('#vertical4').removeClass('open')
  },
)
</script>

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’)

$('#text3').toggleClass('opentext')
    $('#text2').removeClass('opentext')
    $('#text1').removeClass('opentext')
    $('#text4').removeClass('opentext')
    
    $('#text4').toggleClass('opentext')
    $('#text2').removeClass('opentext')
    $('#text3').removeClass('opentext')
    $('#text1').removeClass('opentext')
    
    $('#text1').toggleClass ('opentext')
    $('#text2').removeClass ('opentext')
    $('#text3').removeClass ('opentext')
    $('#text4').removeClass ('opentext')

but this did not work - and I can’t figure out how to achieve that result… perhaps someone can help me… thanks in advance!

Here is my site Read-Only: SITE - please look at the Home (copy) page - this is where I am trying to get the code to work

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.

Something like this:

$(‘.vertical’).on(‘click’, function() {
   $(this).addClass(‘open’);
   $(‘.vertical’).not($(this)).removeClass('open’);
   $(‘.vertical’).not($(this)).find(‘div’).removeClass(‘opentext’);
}

If this doesn’t work post your published site link and I’ll take a look.

1 Like

here is the published site.

@sam-g thanks for the suggestion but it did not work but thank you for trying!!!

That being said, the first part of the code - - that opens and closes the parts of the accordion works perfectly. divs open and close on ‘click’

and as it turns out the problem was solved by adding the div block id (in the div block settings) that corresponds to the div name in the script…

Problem solved!

please have a look at the link (both in webflow and published)

thanks in advance!

@IVG can you clone that page and insert my script, change the class on each of these divs to simply be “vertical”:

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 :slight_smile: 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:

$('.vertical').on('click', function() {
  console.log('clicked');
  $(this).addClass('open');
  $(this).find('div').addClass('opentext');
  $('.vertical').not($(this)).removeClass('open');
  $('.vertical').not($(this)).find('div').removeClass('opentext');
});

You can see this functioning in a codepen here: https://codepen.io/samandalso/pen/oKqbgJ

this is awesome! I will have to test it out! thanks again @sam-g!

FYI - i haven’t yet implemented your code but i made mine work - you can check it out @ https://ivgphoto-fin.webflow.io/home-copy

working on implementing your code - here it is:

$('.vert').on('click', function() {
  console.log('clicked');
  $(this).toggleClass('open');
  $(this).find('vert_txt').addClass('opentxt');
  $(this).find('accd_btn').addClass('openbtn');
  $('.vert').not($(this)).removeClass('open');
  $('.vert').not($(this)).find('vert_txt').removeClass('opentxt');
  $('.vert').not($(this)).find('accd_btn').removeClass('openbtn');
});

(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!

Please let me know if you have any ideas!

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:

$('.vert').on('click', function() {
  console.log('clicked');
  $(this).toggleClass('open');
  $(this).find('.vert_txt').addClass('opentxt');
  $(this).find('.accd_btn').addClass('openbtn');
  $('.vert').not($(this)).removeClass('open');
  $('.vert').not($(this)).find('.vert_txt').removeClass('opentxt');
  $('.vert').not($(this)).find('.accd_btn').removeClass('openbtn');
});
2 Likes

https://ivgphoto-fin.webflow.io/home-test

Try the edited code I posted above and let me know when it’s published.

Thanks so much man! I knew that it was something stupid that I missed!

its all working now!

1 Like

Great, no problem, glad you got it working.