2 Replies - 179 Views - Last Post: 02 September 2019 - 10:21 PM

#1 Splashsky   User is offline

  • D.I.C Regular
  • member icon

Reputation: 12
  • View blog
  • Posts: 350
  • Joined: 25-August 13

Pure CSS Accordion Issue

Posted 26 August 2019 - 04:33 PM

Hey there! Simple task. Can't figure out why some things I've tried aren't working. I am making a horizontal list that's to act as an accordion for tidiness. The basic HTML structure looks like this.
<ul>
    <li>
        <div class="header">
            <h1>Hello!</h1>
            <label class="control">
                <input type="checkbox" class="invisible">
                <i class="icon"></i>
            </label>
        </div>
        <div class="content minimized">
            Hello, world!
        </div>
    </li>
</ul>



And the SCSS that's been written goes like this...
ul {
    li {
        $this: &;
        overflow: hidden;

        .header {
            input:checked {
                #{$this} content { height: auto; }
            }
        }

        .content { height: 0; }
    }
}



but nothing happens. Nothing! I'm not sure if this is the right structure or I'm not leveraging selectors that I could be... any advice?

Is This A Good Question/Topic? 0
  • +

Replies To: Pure CSS Accordion Issue

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6813
  • View blog
  • Posts: 28,189
  • Joined: 12-December 12

Re: Pure CSS Accordion Issue

Posted 27 August 2019 - 04:21 AM

Do the developer tools indicate any issue.

I don't know SCSS but shouldn't it be #{$this} .content { height: auto; } ?
Was This Post Helpful? 0
  • +
  • -

#3 anand9796   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 23-July 19

Re: Pure CSS Accordion Issue

Posted 02 September 2019 - 10:21 PM

Why you want custom accordion? Because Bootstrap provides its own accordion with better UI

Or else please describe your requirement in detail

Why you want custom accordion? Because Bootstrap provides its own accordion with better UI

Or else please describe your requirement in detail
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1