Web Experiments

Experiments in Design, Coding, API's and Web Components

Many of th elements I have experimented with in this space, along with th collapsible experiments below, have gone on to become components of this site so rather than doubling everything up I have removed them from here so they can be seen in th places they were intended to be.

Experiments in Collapsible Content

With the depreciation of the use of fieldset & legend tags for collapsible content it was time to look into more recent ways this can be achieved the most popular seemed to be Bootstrap JS Collapse making use of collapse.js but i also had a look at the HTML5 solution that is now native to most browsers.

1. Collapsible Button

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Want to try Collapsible Button yourself, use the code below:

<h4>
 <button data-target="#collapsiblebutton" data-toggle="collapse">Collapsible Button</button>
</h4>
  <div class="collapse" id="collapsiblebutton">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...<p>
  </div>

2. Collapsible Panel

Collapsible Panel

Tips

Tricks

Hacks

So ends the list thus far, I will update and add to it as time and advancements demand.

Want to try Collapsible Panel yourself, use the code below:

<div class="panel-group">
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a data-toggle="collapse" href="#collapsiblepanel">Collapsible Panel</a>
   </h4>
  </div>
  <div class="panel-collapse collapse" id="collapsiblepanel">
   <div class="panel-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
   <div class="panel-footer">Panel footer text.</div>
  </div>
 </div>
</div>

3. Collapsible Accordion Group

I have added a lot of text in the example below so you can see why accordion works well for a small amount of text but not well at all for a large amount of text. Open the first panel and scroll to the bottom of the copy as though you have read it and then open the second panel.

<div class="panel-group" id="accordion">
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a data-parent="#accordion" data-toggle="collapse" href="#collapse1">Collapsible Group 1</a>
   </h4>
  </div>
  <div class="panel-collapse collapse" id="collapse1">
   <div class="panel-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a data-parent="#accordion" data-toggle="collapse" href="#collapse2">Collapsible Group 2</a>
   </h4>
  </div>
  <div class="panel-collapse collapse" id="collapse2">
   <div class="panel-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a data-parent="#accordion" data-toggle="collapse" href="#collapse3">Collapsible Group 3</a>
   </h4>
  </div>
  <div class="panel-collapse collapse" id="collapse3">
   <div class="panel-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
  </div>
 </div>
</div>

4. HTML5 Variant

Please note, I didn't spend any time tidying up the css (style and layout) of details or summary elements as i decided to go with the bootstrap option.

HTML5 Variant

Title

Want to try HTML5 Variant yourself, use the code below:

<details>
 <summary>Click to open</summary>
 <p>If your browser supports this element, it should allow you to expand and collapse these details.</p>
</details>

Next Section Starts Here

Note to self: Add IG api for drupal instructions.

>_Information & Technology Services

/Web Design /Computer Technician /IT Wrangler

Web Design

Development / Design / Presence

Want to Know More?

Built on software you can depend on.

Computer Tech

Solutions / Software / Hardware

CSS Tricks

Scroll ()

View ()

Image {}

Experiments in Design, Coding, API's and Web Components

Experiments in Collapsible Content

1. Collapsible Button

Collapsible Button

Title

2. Collapsible Panel

Tips

Tricks

Hacks

3. Collapsible Accordion Group

4. HTML5 Variant

HTML5 Variant

Title

Next Section Starts Here

Contact

Contact Form

clinton.tech Sites

Featured Project

Expositions

Read: Web Experiments

Read: Star Wars Viewing Order

Read: Jokes and Fun

Read: Lorem Ipsum Copy

Go to Front Page

CSS:Animaton:Abomination