Menu icon Foundation

Developer | Cincinnati, OH

A web developer, writer, and supporter of the open source community.

My Posts

No Content

My Comments

Joseph Purcell commented on Nick Caldwell's post over 5 years

In addition to validation, the constraints of the structure dd > .content and dd > a don't allow flexibility both in what elements you use and in the structure of those elements. In my opinion, it would be ideal if the accordion JavaScript helper could be used aside from the accordion HTML widget. For example, imagine if the JavaScript widget only required:

  • a parent element denoted by data-accordion
  • a trigger denoted by data-target="{selector}"
  • a container that opens and closes and matches the {selector} of a trigger

Example 1: You could have a section of articles (say, comments or excerpts) that are an accordion:

<section data-accordion>
  <article>
    <header>
      <h1 data-target="#accordion1">Accordion 1</h1>
    </header>
    <div id="accordion1">
      <p>Hello, you can close or open this.</p>
    </div>
  </article>
  <article>
    <header>
      <h1 data-target="#accordion2">Accordion 2</h1>
    </header>
    <div id="accordion2">
      <p>Hello, you can close or open this.</p>
    </div>
  </article>
</section>

Example 2: You could have a lengthy article with each section as an accordion.

<article data-accordion>
  <header>
    <h1>This is an article</h1>
    <nav>
      <h1>Table of Contents</h1>
      <ul>
        <li><a href="#section1" data-target="#section1">Section 1</a></li>
        <li><a href="#section2" data-target="#section2">Section 2</a></li>
      </ul>
    </nav>
  </header>
  <section>
    <h1>Section 1</h1>
    <div id="section1">
      <p>You can open or close this using the table of contents.</p>
    </div>
  </section>
  <section>
    <h1>Section 2</h1>
    <div id="section2">
      <p>You can open or close this using the table of contents.</p>
    </div>
  </section>
</article>

Example 3: You could still have your HTML widget with default styling.

<dl class="accordion" data-accordion>
  <dd>
    <a href="#panel1" data-target="#panel1">Accordion 1</a>
    <div id="panel1" class="content">You can open or close this.</div>
  </dd>
  <dd>
    <a href="#panel2" data-target="#panel2">Accordion 2</a>
    <div id="panel2" class="content">You can open or close this.</div>
  </dd>
</dl>

These are just thoughts that may be bogus or useful.

Joseph Purcell commented on Duc Anh Trinh's post over 5 years

Bump.

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Nick Caldwell's post over 5 years

In addition to validation, the constraints of the structure dd > .content and dd > a don't allow flexibility both in what elements you use and in the structure of those elements. In my opinion, it would be ideal if the accordion JavaScript helper could be used aside from the accordion HTML widget. For example, imagine if the JavaScript widget only required:

  • a parent element denoted by data-accordion
  • a trigger denoted by data-target="{selector}"
  • a container that opens and closes and matches the {selector} of a trigger

Example 1: You could have a section of articles (say, comments or excerpts) that are an accordion:

<section data-accordion>
  <article>
    <header>
      <h1 data-target="#accordion1">Accordion 1</h1>
    </header>
    <div id="accordion1">
      <p>Hello, you can close or open this.</p>
    </div>
  </article>
  <article>
    <header>
      <h1 data-target="#accordion2">Accordion 2</h1>
    </header>
    <div id="accordion2">
      <p>Hello, you can close or open this.</p>
    </div>
  </article>
</section>

Example 2: You could have a lengthy article with each section as an accordion.

<article data-accordion>
  <header>
    <h1>This is an article</h1>
    <nav>
      <h1>Table of Contents</h1>
      <ul>
        <li><a href="#section1" data-target="#section1">Section 1</a></li>
        <li><a href="#section2" data-target="#section2">Section 2</a></li>
      </ul>
    </nav>
  </header>
  <section>
    <h1>Section 1</h1>
    <div id="section1">
      <p>You can open or close this using the table of contents.</p>
    </div>
  </section>
  <section>
    <h1>Section 2</h1>
    <div id="section2">
      <p>You can open or close this using the table of contents.</p>
    </div>
  </section>
</article>

Example 3: You could still have your HTML widget with default styling.

<dl class="accordion" data-accordion>
  <dd>
    <a href="#panel1" data-target="#panel1">Accordion 1</a>
    <div id="panel1" class="content">You can open or close this.</div>
  </dd>
  <dd>
    <a href="#panel2" data-target="#panel2">Accordion 2</a>
    <div id="panel2" class="content">You can open or close this.</div>
  </dd>
</dl>

These are just thoughts that may be bogus or useful.

You commented on Duc Anh Trinh's post over 5 years

Bump.

Posts Followed

Following

  • No Content

Followers

  • No Content