Problem with multi level definition list and jquery

#1 / Sep 10, 2008 11:43pm

stinhambo

1268 posts

Hi all,

I am trying to create an expandable definition list with two levels. Here is my code so far -

<dl>
    <dt class="section"><a href="http://">Open the next definition list</a></dt>
                
    <dl>
        <dt class="solution"><a href="http://">Solution 1</a></dt> <!-- Click this to reveal the next three dd -->

        <dd><a href="http://">Product Name #1</a></dd>
        <dd><a href="http://">Product Name #2</a></dd>
        <dd><a href="http://">Product Name #3</a></dd>
                    
        <dt class="solution"><a href="http://">Solution 2</a></dt> <!-- Click this to reveal the next three dd -->

        <dd><a href="http://">Product Name #1</a></dd>
        <dd><a href="http://">Product Name #2</a></dd>
        <dd><a href="http://">Product Name #3</a></dd>            
    </dl>            
</dl>

So I have a link which is the dt with the class section. The underneath that I have another dl which expands when I click the dt with the class section.

What I can’t figure out is how to expand the dd elements after each dt with solution class. I only want to target the dd elements the immediately come after that dt but only up until the next dt.

$("dt.section").click(function(){
        $(this).siblings().toggle();
        $(this).toggleClass("open");
        return false;
    });
    
    $("dt.solution").click(function(){
        $(this).nextAll().toggle();
        $(this).toggleClass("open");
        return false;
    });

The first bit opens and closes the dt ok I can’t get my head around how to target all dd only up until the next dt. nextAll opens all dd, next just the next dd.

Any help?

#2 / Sep 11, 2008 12:22am

stinhambo

1268 posts

I managed to find a solution which is -

$('dt.solution').click(function() {
    var obj = $(this).next();
        while (obj.is('dd')) {
        obj.toggle();
        obj = obj.next();
    }
    return false;
});

#3 / Jul 05, 2010 1:24am
vibe9
96 posts
Hey Steve,

Do you have a working example of this? I’m trying to do the same thing right now but not having any luck. Specifically, I have some HTML (see below) and I want the DT to open all of the DDs below it up to but not including the next DT.
```
<dl>
         <dt>Heading 1</dt>
                 <dd>Stuff here…</dd>
                 <dd>Stuff here…</dd>
                 <dd>Stuff here…</dd>
          <dt>Heading 2</dt>
                 <dd>Stuff here…</dd>
                 <dd>Stuff here…</dd>
            etc..
</dl>
```
#4 / Jul 05, 2010 2:33am
Wouter Vervloet
758 posts
Hi vibe,

Since this thread was started, jQuery has had a few upgrades and additions, so it is much easier now:
```
$('dt').nextAll('dd').click(function(evt) {
  $(this).toggle();
});
```
Greetz,
Wouter
#5 / Jul 05, 2010 1:48pm
vibe9
96 posts
Thanks Wouter. I’m definitely a jquery amateur, so forgive any stupid questions; I’ve tried using your code (see below) but I am not getting any results? Here’s what I am using:
```
$(function() {
    $('dt').nextAll('dd').click(function(evt) {
        $(this).toggle();
    });
});
```
The original code I had, which only sort of “works” in that it only opens the first child DD is:
```
$(function() {
            $('dt').click(function() {
                $(this).next('dd').toggle("fade");
                return false;
            }).next().hide();
});
```
Any suggestions?
#6 / Jul 05, 2010 2:49pm
Wouter Vervloet
758 posts
Sorry about that… I quickly threw this at you this morning before work and now I look at it again, it’s complete rubbish.

I’m just left wondering… why do you need to split the content up in multiple <dd>‘s? Is it necessary for the semantics? It would make it so much easier if you just put it in 1 <dd>.

But Steven’s example should work:
```
$('dt').click(function(evt) {
  var obj = $(this).next();
  while (obj.is('dd')) {
    obj.toggle();
    obj = obj.next();
  }
});
```
Greetz,
Wouter

#7 / Jul 05, 2010 2:59pm

vibe9

96 posts

Steven’s example does not work for some reason. Believe me, I know it would be easier 😊

However, I am using the string plugin to organize a set of Field Frame Matrix data by category headings, and so can’t really accomplish that so easily with in that scenario.

In case you’re curious, here’s what I am doing:

<dl>{cf_documents_data orderby="ff_category|ff_title" sort="asc"}
    {exp:string:output name="category" random}
        {if string != ff_category}
            <dt>{ff_category:heading}</dt>
        {/if}
    {/exp:string:output}
    {exp:string:set name="category" random}{ff_category}{/exp:string:set}
  <dd>{if ff_file}<a href="http://{ff_file}" target="_blank" rel="noopener">{ff_title}</a>{if:else}{ff_title} - <em>No File Attached</em>{/if}</dd>
{/cf_documents_data}</dl>

See attached image for a screenshot of what my Field Frame matrix looks like.

#8 / Jul 05, 2010 3:08pm

Wouter Vervloet

758 posts

What if you added a class to the elements containing the category name?

<dl>{cf_documents_data orderby="ff_category|ff_title" sort="asc"}
    {exp:string:output name="category" random}
        {if string != ff_category}
            <dt class="{ff_category}">{ff_category:heading}</dt>
        {/if}
    {/exp:string:output}
    {exp:string:set name="category" random}{ff_category}{/exp:string:set}
  <dd class="{ff_category}">{if ff_file}<a href="http://{ff_file}" target="_blank" rel="noopener">{ff_title}</a>{if:else}{ff_title} - <em>No File Attached</em>{/if}</dd>
{/cf_documents_data}</dl>

Your jQuery would look something like this:

$('dt').click(function(evt) {
  $(this).siblings('dd.'+$(this).attr('class')).toggle();
});

This only works if the variable {ff_category} outputs an URL safe string.

Greetz,
Wouter

#9 / Jul 05, 2010 3:17pm
vibe9
96 posts
Creating unique classes for each <dt> is no problem, but still getting no results - perhaps my jquery syntax is wrong?
```
$(function() {
$('dt').click(function(evt) {
  $(this).siblings('dd.'+$(this).attr('class')).toggle();
});
});
```
#10 / Jul 05, 2010 3:20pm

Wouter Vervloet
758 posts

If you look at the outputted HTML, what does it look like?

#11 / Jul 05, 2010 3:25pm

vibe9

96 posts

The HTML is clean. It’s got a unique class added to each DT element:

<dl class="toggleList">
                    <dt class="cat32">2010 Survey</dt>
                  <dd class="pdf"><a href="/files/Test.pdf" target="_blank" rel="noopener">Test Doc</a></dd>
                    <dt class="cat33">Capacity Building Program</dt>
                  <dd class="pdf"><a href="/files/Test.pdf" target="_blank" rel="noopener">Another Test Doc</a></dd>
                  <dd class="doc"><a href="/files/Test.doc" target="_blank" rel="noopener">Yet Another Test Doc</a></dd>
</dl>

#12 / Jul 05, 2010 3:28pm

Wouter Vervloet
758 posts

That’s just plain weird…

{ff_category} outputs different values in the same loop?
#13 / Jul 05, 2010 3:31pm

vibe9
96 posts

Yes, that’s the whole intention: cat22, cat23, cat24 etc… then there can be a number of DD’s under each. Moreover, that’s the magic of the string plugin 😊
Checkout the screenshot in above post.

Thread

stinhambo

stinhambo

vibe9

Wouter Vervloet

vibe9

Wouter Vervloet

vibe9

Wouter Vervloet

vibe9

Wouter Vervloet

vibe9

Wouter Vervloet

vibe9

Username

Password

Thread