Semantic-ui: Accordion revealing hidden content while opening

[mikocot]

Hi,

I was surprised by a weird behavior of my website after migrating to 1.x (currently 1.4)

Apparently, elements hidden with display: none, are made visible again anytime an accordion is opened.

See here for example:
http://jsfiddle.net/uk4a4cej/5/

I was able to find that there is a reset.display method called on each element, resetting display to "".
"Removing inline display from element".

Pretty irritating, especially together with knockout that uses inline display for visible binding.

Cheers

[jlukic]

Child elements animate opacity on opening

Caused by typo. Should only clear inline opacity styles. See 7166d51

[mikocot]

Haha, seems reasonable. that was a quick response. Thanks :)

[mikocot]

Hi again, we are using 1.7.3 in production, which has this patch already working.

However, in some cases the accordion still removes display:none inline style from some elements inside.
(ex. ui label with knockout validationMessage gets revealed.)

I've checked that turning settings.animateChildren to false solves the problem. So basicallyt this part is responsible:

$activeContent .children() .transition({ animation : 'fade in', useFailSafe : true, debug : settings.debug, verbose : settings.verbose, duration : settings.duration });

any ideas?

[junchen4]

Was this ever resolved as of the latest version? I'm having similar issues with it "unhiding" hidden elements.

[jlukic]

I dont really understand this issue, can someone provide a test case, and explain the bug more fully.

[xGouley]

Still happening!

Every element (div, span at least) in a accordion receives the following class by semantic in JS way, during opening:
.visible.transition {
display: block!important;
visibility: visible!important;
}

Too much aggressive from Semantic, but there is a way to bypass behavior: encapsulate the div you want to hide by another div. Since .visible.transition is applied only on the first level of div, you can hide the sub-div.

[RobinKuiper]

@xGouley Thank you for this fix. Was trying everything.

[labby]

@xGouley: also a big thank from me, also tried several solutions.

[martin-bailey]

This seems to be causing issues in Semantic-UI 2.13 depending on how your CSS is bundled.

.ui.accordion .title~.content{display:none}

Should it be the following?

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