Andrea Posted September 25, 2014 Report Share Posted September 25, 2014 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.... Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 25, 2014 Report Share Posted September 25, 2014 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/ Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 25, 2014 Author Report Share Posted September 25, 2014 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 25, 2014 Report Share Posted September 25, 2014 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? Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 26, 2014 Author Report Share Posted September 26, 2014 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.... Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 26, 2014 Author Report Share Posted September 26, 2014 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 26, 2014 Report Share Posted September 26, 2014 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.