CODEWITHSUNDEEP
jquerymenusubmenu
Brannon R Laveder
Brannon R Laveder

Reputation: 11

Accordion-style menu with a submenu

The menu works, but the submenu does not. when you click on the submenu it acts funny and doesn't show the information plus it just closes the parent div. any help would be amazing. 

$(function() {
  // when a tab is clicked
  $(".hideSeekTab").on("click", function() {
    // if the one you clicked is open,
  if (
      $(this)
       .find("#hiddenDivs")
        .hasClass("open")
    ) {
      // then close it.
      $(".hideSeekTab .open")
        .slideToggle()
        .removeClass("open");
      $(".iconBox").removeClass("closed");
      // otherwise,
    } else {
      // close all tabs, 
      $(".hideSeekTab .open")
        .slideToggle()
        .removeClass("open");
      // and open the one you clicked
      $(this)
      .find("#hiddenDivs")
       .slideToggle()
     .addClass("open");
      $(".iconBox").removeClass("closed");
      $(this)
        .find(".iconBox")
        .addClass("closed");
    }
  });
});

https://codepen.io/blaveder1/pen/paQmyq

Upvotes: 0

Views: 384

Answers (1)

RickL
RickL

Reputation: 3393

Without re-coding your example (which doesn't really help in a proper way), I'd recommend looking at this page, which sets out the simplest possible accordion using jQuery, and build from there. Concentrate on getting the structure right first, and then go for the styling.

Ridiculously simple accordion without the jQuery UI library

A big point your missing in your code is that "id" should be unique per page - only one element per page should have that id. If you want to find more than one element with jQuery, your should use css classes.

Also, when your baby is looking good, try disabling javascript in your browser and then see how it looks ( ... actually, you should do this first so that it degrades "gracefully" if the user, for some reason, switches javascript off).

Accordions are a great way to get to know jQuery and I hope this helps.

Upvotes: 1

Related Questions