Fomantic-UI Sandbox

HTML

<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<link rel="stylesheet" href="https://fomantic-ui.com/dist/semantic.css">
 <div class="field">
    <label>Item</label>
   <div class="ui selection fluid dropdown status">
     <i class="dropdown icon"></i>
     <div class="default text">Item</div>
     <div class="menu">
       <div class="item" data-value="1">Item 1</div>
       <div class="item" data-value="2">Item 2</div>
       <div class="item" data-value="3">Item 3</div>
     </div>
   </div>
  </div>
    
  <div class="field">
    <label>Accordion</label>
    <div class="ui fluid accordion">
      <div class="title">
        <i class="dropdown icon"></i>
        <span>Setting 1<span>
      </div>
      <div class="content">
        <div class="ui multiple fluid selection dropdown operation">
          <i class="dropdown icon"></i>
          <div class="default text">Dropdown</div>
          <div class="menu">
            <div class="item" data-value="1">Dropdown 1</div>
            <div class="item" data-value="1">Dropdown 2</div>
          </div>
        </div>
    </div>
  </div>

CSS

body {
  padding: 1em;
}

JavaScript

// Add javascript here
$('.ui.dropdown').dropdown()
$('.ui.accordion').accordion();