Fomantic-ui: [Accordion][Header] Header with content has display:none when in an accordion element

Created on 4 Sep 2018  路  2Comments  路  Source: fomantic/Fomantic-UI

Steps

  1. Create an accordion
  2. In the visible part, add a header with content inside
<h2 class="ui grey header">
    <i class="newspaper outline padded icon"></i>
    <div class="content">
        <span class="s-title">Top 10 anime fights</span>
        <div class="sub header s-author">By John Johnson</div>
     </div>
 </div>

Expected Result

Header is visible, like it was prior to me upgrading from SUI to FUI.

Actual Result

Header receives display: none:
image

Version

2.5

Testcase

https://jsfiddle.net/29onq46h/

lancss typbug

Most helpful comment

I implemented it similar to the original state with :not(.active)

.ui.accordion .title ~ .content:not(.active),
.ui.accordion .accordion .title ~ .content:not(.active) {
  display: none;
}

All 2 comments

Seems to be introduced by 1dea0bf4dd4f5f61315fe200e1cef2df2d254459.

@ColinFrick it should be fixable by changing this code:

.ui.accordion .content:not(.active),
.ui.accordion .accordion .content:not(.active) {
  display: none;
}

With this code:

.ui.accordion > .content:not(.active),
.ui.accordion .accordion > .content:not(.active) {
  display: none;
}

What do you think ?

I implemented it similar to the original state with :not(.active)

.ui.accordion .title ~ .content:not(.active),
.ui.accordion .accordion .title ~ .content:not(.active) {
  display: none;
}
Was this page helpful?
0 / 5 - 0 ratings