CODEWITHSUNDEEP
semantic-ui
user1151646
user1151646

Reputation:

Semantic UI > Accordion > Custom trigger element on nested accordion

I want to have custom trigger element for top level accordion elements as well as for sub level. What will be the proper JS code for this structure?

<div class="ui accordion">
    <div class="title">
        <span class="custom-trigger-1"></div>
    </div>
    <div class="content">
        <div class="accordion">
            <div class="title">
                <span class="custom-trigger-2"></div>
            </div>
            <div class="content"></div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 1446

Answers (1)

Matthew Makaio
Matthew Makaio

Reputation: 51

Your html needs some tag correction.. but you can accomplish this with:

$('.ui.accordion').accordion().on('click', function(e) {


    console.log(e);

});

Now you have a reference to the clicked dom object and can get your "custom trigger" identifier(s).

If this is going to be a simple use case then I would recommend using the onclick="" html attribute or using an <a> tag.

See it in action: http://codepen.io/appsoa/details/XmYRyz/

Markup, If using javascript to render the component:

<div class="ui styled accordion"> <div class="active title"> <i class="dropdown icon"></i> Level 1 </div> <div class="active content"> Welcome to level 1 <div class="accordion"> <div class="active title"> <i class="dropdown icon"></i> Level 1A </div> <div class="active content"> <p>Level 1A Contents</p> <div class="accordion"> <div class="title active"> <i class="dropdown icon"></i> Level 1A-A </div> <div class="content active"> Level 1A-A Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 1A-B </div> <div class="content"> Level 1A-B Contents </div> </div> </div> <div class="title"> <i class="dropdown icon"></i> Level 1B </div> <div class="content"> Level 1B Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 1C </div> <div class="content"> Level 1C Contents </div> </div> </div> <div class="title"> <i class="dropdown icon"></i> Level 2 </div> <div class="content"> <p>Welcome to level 2</p> <div class="accordion"> <div class="active title"> <i class="dropdown icon"></i> Level 2A </div> <div class="active content"> <p>Level 2A Contents</p> <div class="accordion"> <div class="title"> <i class="dropdown icon"></i> Level 2A-A </div> <div class="content"> Level 2A-A Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 2A-B </div> <div class="content"> Level 2A-B Contents </div> </div> </div> <div class="title"> <i class="dropdown icon"></i> Level 2B </div> <div class="content"> Level 2B Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 2C </div> <div class="content"> Level 2C Contents </div> </div> </div> </div>

Upvotes: 1

Related Questions