[Accordion] Its `.content` and `.title` classes shouldn’t override the corresponding classes of nested components.

[dmaison]

Steps to Reproduce

1. Create accordion
2. Add header inside accordion

Expected
The header should be formatted correctly

Result
The inherent accordion style interferes with the formatting of the header

Testcase
http://jsfiddle.net/p9L4c6Lh/1/

[Darkesthour]

Hello.
But why do you use <div class="content"/> inside <h2 class="ui dividing header"/>? It works perfectly without this extra-container (it's because content class has a special purpose inside <div class="ui accordion"/>).

[BitForger]

to sum up @Darkesthour explanation.. remove the div.content sitting inside the dividing header.

[dmaison]

@Cyb3rWarri0r8 @Darkesthour, this solution doesn't account for adding sub headers, or even any other type of semantic style group that can utilize a content class.

The way I see it, specific styles shouldn't conflict with other styles in semantic. Changing the style for accordion content from .ui.accordion .content to .ui.accordion > .content would prevent any foreseeable conflicting issues.

[BitForger]

@dmaison Well there is the ability to override that if you want to... I haven't tried this, but for things that say to have a div.content have you tried just using it without the content wrapper?

[Unsfer]

One more appropriate testcase, this time with Floated List:
http://jsfiddle.net/fseb296h/

And in my case I can't just remove "content" class, because I'm using Semantic-UI-React.
I also think, that .ui.accordion > .content will be just fine

[awgv]

The search component seems to be affected as well: #5330.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.