[List & Accordion] How to have accordion within a list with images?

[smartm0use]

Hello,
I have a list like this:

<div class="ui relaxed divided list">
  <div class="item">
    <i class="large github middle aligned icon"></i>
    <div class="content">
      <a class="header">Semantic-Org/Semantic-UI</a>
      <div class="description">Updated 10 mins ago</div>
    </div>
  </div>
  <div class="item">
    <i class="large github middle aligned icon"></i>
    <div class="content">
      <a class="header">Semantic-Org/Semantic-UI-Docs</a>
      <div class="description">Updated 22 mins ago</div>
    </div>
  </div>
  <div class="item">
    <i class="large github middle aligned icon"></i>
    <div class="content">
      <a class="header">Semantic-Org/Semantic-UI-Meteor</a>
      <div class="description">Updated 34 mins ago</div>
    </div>
  </div>
</div>

As seen here.

How to add accordion without changing list layout?

I mean that I could click on item, the whole row, and have it expanded like this:

Then clicking again on the expanded row will close it back again.

What is the best way to implement it?

[lubber-de]

• add title to the item divs
• add another content div which is supposed to display your accordion data
  See https://jsfiddle.net/lubber/1cLv67kj/3/
  

Additionally use exclusive: false to make each row independent
See https://jsfiddle.net/lubber/1cLv67kj/6/

[smartm0use]

Thank you so much!