Skip to content

Commit

Permalink
Updated examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@stefangabos
stefangabos committed Jul 13, 2018
1 parent 8004351 commit e4f0dc9
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 10 deletions.
24 changes: 19 additions & 5 deletions examples/examples.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,16 @@ dl.Zebra_Accordion {
}

dl.Zebra_Accordion dt {
background: #000;
color: #FFF;
background: #ccc;
color: #333;
font-weight: bold;
padding: 5px;
padding: 10px 15px;
border-bottom: 1px solid #FFF;
}

dl.Zebra_Accordion dt.Zebra_Accordion_Expanded {
background: #c09853;
color: #FFF;
}

dl.Zebra_Accordion dd {
Expand All @@ -29,6 +35,14 @@ dl.Zebra_Accordion dd {
margin: 1px 0;
}

dl.Zebra_Accordion dt.Zebra_Accordion_Expanded {
background: #C40000;
#Zebra_Accordion3 dt:before {
content: "▶";
margin-right: 10px;

}

#Zebra_Accordion3 dt.Zebra_Accordion_Expanded:before {
content: "▼";
margin-right: 10px;

}
2 changes: 2 additions & 0 deletions examples/examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,6 @@ $(document).ready(function() {
collapsible: true
});

new $.Zebra_Accordion('#Zebra_Accordion3');

});
101 changes: 96 additions & 5 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,31 @@ <h1>Zebra Accordion</h1>

<div class="col-xs-12">

<h3>Setup</h3>
<p>
Zebra Accordion is a tiny (3KB minified, ~1.3KB gzipped) jQuery accordion plugin. It transforms a
basic definition list, without requiring any specific markup, into a small-footprint, easily
configurable, fully customizable, cross-browser accordion widget, useful for better organizing
larger groups of content.
</p>

<hr>

<div class="row">
<div class="col-sm-6">
1. <a href="#setup">Setup</a><br>
2. <a href="#basic-usage">Basic usage</a><br>
3. <a href="#collapsing-expanding-all">Collapsing/expanding ALL tabs</a><br>
4. <a href="#arrows">One way of adding arrows as state indicators</a><br>
</div>
<div class="col-sm-6">
</div>
</div>

<hr>

<!-- =========================================================================================== -->

<h3><a name="setup"></a><strong>1.</strong> Setup</h3>

<br><p>A basic definition list is all that it is required. We add the <code>Zebra_Accordion</code> class just
because we have some minimal properties defined in the plugin's CSS file, that make sure that the
Expand Down Expand Up @@ -120,7 +144,7 @@ <h3>Setup</h3>

<hr>

<h3>Basic usage</h3>
<h3><a name="basic-usage"></a><strong>2.</strong> Basic usage</h3>

<br><p>JavaScript</p>

Expand All @@ -130,7 +154,7 @@ <h3>Basic usage</h3>
});
</pre>

<p>Result</p>
<br><p>Result</p><br>

<dl class="Zebra_Accordion" id="Zebra_Accordion1">
<dt>Lorem ipsum dolor sit amet consectetuer</dt>
Expand Down Expand Up @@ -165,7 +189,7 @@ <h3>Basic usage</h3>

<!-- =========================================================================================== -->

<h3>Collapsing/expanding ALL tabs</h3>
<h3><a name="collapsing-expanding-all"></a><strong>3.</strong> Collapsing/expanding ALL tabs</h3>

<br><p>JavaScript</p>

Expand All @@ -177,7 +201,7 @@ <h3>Collapsing/expanding ALL tabs</h3>
});
</pre>

<p>Result</p>
<br><p>Result</p><br>

<dl class="Zebra_Accordion" id="Zebra_Accordion2">
<dt>Lorem ipsum dolor sit amet consectetuer</dt>
Expand Down Expand Up @@ -210,6 +234,73 @@ <h3>Collapsing/expanding ALL tabs</h3>

<hr>

<!-- =========================================================================================== -->

<h3><a name="arrows"></a><strong>4.</strong> One way of adding arrows as state indicators</h3>

<p>One way of doing this is to use Unicode characters and the <code>before</code> pseudo selector.
We will use right oriented arrow when tabs are not expanded, and arrows pointing down when the content
is expanded.</p>

<blockquote><small>Note that for this way of doing it, we don't have to change the markup!</small></blockquote>

<br><p>CSS</p>

<pre class="brush:css">
.Zebra_Accordion dt:before {
content: "▶";
margin-right: 10px;

}

.Zebra_Accordion dt.Zebra_Accordion_Expanded:before {
content: "▼";
margin-right: 10px;

}
</pre>

<br><p>JavaScript</p>

<pre class="brush:js">
$(document).ready(function() {
var myAccordion = new $.Zebra_Accordion('.Zebra_Accordion');
});
</pre>

<br><p>Result</p><br>

<dl class="Zebra_Accordion" id="Zebra_Accordion3">
<dt>Lorem ipsum dolor sit amet consectetuer</dt>
<dd>
Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
</dd>
<dt>Lorem ipsum dolor sit amet consectetuer</dt>
<dd>
Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
</dd>
<dt>Lorem ipsum dolor sit amet consectetuer</dt>
<dd>
Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
</dd>
<dt>Lorem ipsum dolor sit amet consectetuer</dt>
<dd>
Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
</dd>
</dl>

<a href="#top" class="pull-right clearfix top small">To the top</a>

<hr>

<br>

<p class="text-center"><small>copyright &copy; 2011-2018 <a href="https://github.com/stefangabos/">stefan gabos</a></small></p>
Expand Down

0 comments on commit e4f0dc9

Please sign in to comment.