Actions

Difference between revisions of "Test"

From ThornsWiki

(TEST ACCORDION)
Line 93: Line 93:
  
  
===TEST ACCORDION===
+
===TEST FILTER===
  
<div class="accordion vertical">
+
<h1>FILTER BY COLOR</h1>
    <ul>
+
<div class="container">  
        <li>
+
  <input type="radio" id="blue" name="color" />
            <input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
+
  <label for="blue">BLUE</label>
            <label for="checkbox-1">Title&nbsp;One</label>
+
  <input type="radio" id="red" name="color"/>
            <div class="content">
+
  <label for="red">RED</label>
                <h3>This is an example accordion item</h3>
+
  <input type="radio" id="green" name="color"/>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
+
  <label for="green">GREEN</label>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
+
  <input type="radio" id="reset" name="color"/>
            </div>
+
  <label for="reset">RESET</label>
        </li>
+
 
        <li>
+
  <div class="tile blue">1</div>
            <input type="checkbox" id="checkbox-2" name="checkbox-accordion" />
+
  <div class="tile red">2</div>
            <label for="checkbox-2">Title&nbsp;Two</label>
+
  <div class="tile blue">3</div>
            <div class="content">
+
  <div class="tile green">4</div>
                <h3>Totally another one right here</h3>
+
  <div class="tile blue">5</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
+
  <div class="tile red">6</div>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
+
  <div class="tile red">7</div>
            </div>
+
  <div class="tile green">8</div>
        </li>
+
  <div class="tile blue">9</div>
        <li>
+
  <div class="tile green">10</div>
            <input type="checkbox" id="checkbox-3" name="checkbox-accordion" />
+
  <div class="tile red">11</div>
            <label for="checkbox-3">Title&nbsp;Three</label>
+
  <div class="tile green">12</div>
            <div class="content">
+
  <div class="tile blue">13</div>
                <h3>I think I can go on forever</h3>
+
  <div class="tile blue">14</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
+
  <div class="tile green">15</div>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
+
  <div class="tile red">16</div>
            </div>
 
        </li>
 
        <li>
 
            <input type="checkbox" id="checkbox-4" name="checkbox-accordion" />
 
            <label for="checkbox-4">Title&nbsp;Four</label>
 
            <div class="content">
 
                <h3>I was wrong, I'm done</h3>
 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
 
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
 
            </div>
 
        </li>
 
    </ul>
 
 
</div>
 
</div>
  
 
__NOTOC__
 
__NOTOC__

Revision as of 09:07, 25 April 2019



TEST FILTER

FILTER BY COLOR

 <input type="radio" id="blue" name="color" />
 <label for="blue">BLUE</label>
 <input type="radio" id="red" name="color"/>
 <label for="red">RED</label>
 <input type="radio" id="green" name="color"/>
 <label for="green">GREEN</label>
 <input type="radio" id="reset" name="color"/>
 <label for="reset">RESET</label>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16