Using accordion in semantic ui - in Angular js

Question

I am using semantic ui accordion in my template of my angular js project.

<div class="ui accordion">
        <div class="active title">
            <i class="dropdown icon"></i>
            What is a dog?
        </div>
        <div class="active content">
            <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
        </div>
        <div class="title">
            <i class="dropdown icon"></i>
            Content
        </div>
        <div class="active content">
            <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
        </div>
    </div>

The problem is both the contents are in open state, without having a necessity to click on the accordion to open. What is the change I need to do?

Answer 1

There are four things you might check:

1) Remove the 'active' class from the last div in your markup since it makes its content visible.

2) You need to initialize the accordion via

$('.ui.accordion').accordion();

See the usage information on the Semantic UI accordion page: http://semantic-ui.com/modules/accordion.html#/usage

3) You will also need to include the Semantic UI javascript files.

4) Since you said you use the accordion in a template, you have to wrap the initializtion inside a script inside the template or (the angular way) write a short directive which will invoke the accordion initialization on the element for you.