Need To Show/hide Multiple Sections

[Andrea]

I cannot believe that in over 2 hours of googling, I have not found an answer that seems to address my issue.

 

I have a list with sub-lists.

<ul>
<li>First Thing
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li></ul>
</li>
<li>Second Thing
 <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li></ul>
</li>
<ul>

I want only the top li (first thing / second thing) to show, but when clicked, I then want my 1, 2, 3, 4 list to appear. Kind of like many sites have with their FAQ2 - so each working independently. I don't even care if First Thing detail closes back up once I move to second thing.

 

My real list is much longer and sub-list are of different length.

 

Help, please....

[falkencreative]

Are you sure that list is the right way to format it? I'd likely suggest using a definition list, where clicking on the definition term reveals the description (which in your case, would include your interior list). You could also use the link below for the way you have things structured -- you just have to pick a different element to open instead of the next() item.

 

This should be pretty straightforward and easy for us to work with? http://css-tricks.com/snippets/jquery/simple-jquery-accordion/

[Andrea]

Don't have any strong attachment to using lists, so I changed it to a definition list. You are of course right, that makes more sense. Other than that, the link you give me looks easy enough---- until I realize I have never even heard of SASS/SCSS....

Can I put that in my header just like regular CSS? (Inside the style tags)? And that jquery code goes just above the closing body tag? Inside another set of style tags?

 

Sorry - I feel rather stupid right now. I guess that's what happens when you lay back and think you know at least a little something.

 

Either way - I've been trying and googling, and NADA... here is my struggle: http://alturl.com/ypgos

[falkencreative]

Think of SASS/SCSS as a server-powered version of CSS. It gives you an alternate syntax to use, with stuff like includes, variables, etc to make CSS more powerful and easier to work with, then exports out to regular CSS.

 

Here's the CSS version, though frankly it only adds style, not functionality, so you really don't need it.

.accordion {
  margin: 50px;
}
.accordion dt, .accordion dd {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}
.accordion dt:last-of-type, .accordion dd:last-of-type {
  border-bottom: 1px solid black;
}
.accordion dt a, .accordion dd a {
  display: block;
  color: black;
  font-weight: bold;
}
.accordion dd {
  border-top: 0;
  font-size: 12px;
}
.accordion dd:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

For the jQuery, that's Javascript, so you'd paste it inside of script tags with the usual jquery ready block, so it runs the code once the page has loaded (http://api.jquery.com/ready/). Make sure you are including jquery in the project, if you haven't already.

<script>
(function($) {

  var allPanels = $('.accordion > dd').hide();

  $('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);
</script>

You can view the source of the example here, in case that's helpful: view-source:http://s.codepen.io/css-tricks/fullpage/LufJE?

[Andrea]

Thank you so much for your help, Ben.

 

I'm a little bit closer --- (the last link you posted isn't working) - but I did figure out that the jQuery code does NOT work when it's in the head section, but does work when I put it just above the closing body tag. Wasn't sure about that, as Google seemed to have contradicting information on the topic.

 

Now I have just one more problem -- when I click my dts, only one dd appears, and there are a varying number of multiples under each dt.

 

My quest continues....

[Andrea]

I fixed it -- (sometimes it helps to be working with smart people, Ph.D.s and stuff, even if they don't build websites  ) No idea if that was the actual problem, maybe I don't understand Definition Lists, but instead of having multiple DDs under the DTs, I reduced it to just one and instead put p tags around my individual items. And voila ---- the jQuery still only opens one DD, but not that has everything inside.

 

Amazing how many hours I can be entertained by something like that

 

 

Again, thanks a bunch, Ben. Without your help, I'd still be pulling  my hair.

[falkencreative]

Yeah, I think it just comes down to the way a definition list works -- a definition list is made up of definition terms/definition description pairs, so you can't have one DT with multiple DDs.