CODEWITHSUNDEEP
semantic-ui
OmerSakar
OmerSakar

Reputation: 175

Semantic-UI Accordion Buttons in title

What I am trying to do is the following: I want an Accordion each row having a question name (in the example below this is "Question 1") and two buttons in the title. However, there are two things going wrong.

Firstly, when clicking one of the two buttons, the accordion collapses. This I could not get fixed.

Secondly, when the accordion is closed, the buttons overlap the boundary of their row. This can be seen in the second picture.

Figure 1 Figure 2

<div class="ui vertical styled fluid accordion">
    <div class="active title">
        <i class="dropdown icon"></i> Question 1
        <button class="ui right floated button"><i class="copy icon"></i>Copy</button>
        <button class="ui right floated button"><i class="share icon"></i>Share</button>
    </div>
    <div class="active content">
        <div class="ui celled grid">
            <div class="row">
                <div class="ui eight wide column">
                    <p>Question 1</p>
                </div>
                <div class="ui eight wide column">
                    <p>Answer: lorum ipsum en dingen</p>
                </div>

            </div>
        </div>
    </div>
</div>

Upvotes: 3

Views: 3086

Answers (1)

arvind narayanan
arvind narayanan

Reputation: 46

i resolved it by using the "selector" which is provided by the semantic ui itself. Here i attached the sample

$('.ui.accordion').accordion({
  selector: {
    trigger: '.title .qus_label'
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="ui styled accordion" id="qus_acc">
  <div class="item">
    <div class="title">
      <div class="qus_label">
        <i class="dropdown icon"></i>
        <label>Asd</label>
      </div>
      <div class="field" align="right">
        <div class="ui blue compact simple dropdown button" title="Settings">
          <i class="fa fa-cog"></i>
          <div class="ui menu">
            <div class="item field">
              <div class="ui checkbox">
                <input type="checkbox">
                <label>Required</label>
              </div>
            </div>
            <div class="item field">
              <div class="ui checkbox">
                <input type="checkbox">
                <label>Random</label>
              </div>
            </div>
          </div>
        </div>
        <div class="ui red compact icon button" title="Delete" onclick="alert('Hi');">
          <i class="fa fa-trash"></i>
        </div>
        <div class="ui green compact icon button" title="Edit">
          <i class="fa fa-pencil-square-o"></i>
        </div>
        <div class="ui yellow compact icon button" title="Add Logic">
          <i class="fa fa-share-alt"></i>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="transition hidden">
        <div class="ui form">
          <div class="field">
            <label>Question</label>
            <input type="text" placeholder="Single Selection">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

Upvotes: 3

Related Questions