|
|
| Linje 68: |
Linje 68: |
| </div> | | </div> |
|
| |
|
| </div>
| |
|
| |
|
| <div class="w3-row">
| |
| <div class="w3-half">
| |
| <h4>Accordions</h4>
| |
| <button class="w3-padding-16 w3-button w3-block w3-left-align w3-red w3-hover-pink" onclick="myFunc('Demo5')">Accordion 1 <i class="fa fa-caret-down"></i></button>
| |
| <div class="w3-hide w3-card" id="Demo5">
| |
| <a class="w3-button w3-block w3-left-align" href="javascript:void(0)">Link 1</a>
| |
| <a class="w3-button w3-block w3-left-align" href="javascript:void(0)">Link 2</a>
| |
| <a class="w3-button w3-block w3-left-align" href="javascript:void(0)">Link 3</a>
| |
| </div>
| |
| <button class="w3-padding-16 w3-button w3-block w3-left-align w3-red w3-hover-pink" onclick="myFunc('Demo4')">Accordion 2 <i class="fa fa-caret-down"></i></button>
| |
| <div class="w3-hide w3-card" id="Demo4">
| |
| <div class="w3-container">
| |
| <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="w3-half">
| |
| <div class="testmargin">
| |
| <h4>Dropdowns</h4>
| |
| <div class="w3-dropdown-click" style="margin-bottom: 73px;">
| |
| <button class="w3-button w3-red w3-hover-pink w3-padding-16" onclick="myFunction()">Dropdown <i class="fa fa-caret-down"></i></button>
| |
| <div class="w3-dropdown-content w3-card" id="myDropdown">
| |
| <a style="color: rgb(0, 0, 0);" href="javascript:void(0)">Link 1</a>
| |
| <a style="color: rgb(0, 0, 0);" href="javascript:void(0)">Link 2</a>
| |
| <a style="color: rgb(0, 0, 0);" href="javascript:void(0)">Link 3</a>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
|
| <script>
| |
| /* When the user clicks on the button,
| |
| toggle between hiding and showing the dropdown content */
| |
| function myFunction() {
| |
| var x = document.getElementById("myDropdown");
| |
| if (x.classList) {
| |
| x.classList.toggle("w3-show");
| |
| } else {
| |
| // Fallback for IE9
| |
| var classes = x.className.split(" ");
| |
| var i = classes.indexOf("w3-show");
| |
|
| |
| if (i >= 0)
| |
| classes.splice(i, 1);
| |
| else
| |
| classes.push("w3-show");
| |
| x.className = classes.join(" ");
| |
| }
| |
| }
| |
| </script>
| |
| </div>
| |
| </div> | | </div> |
| __NOTOC__ | | __NOTOC__ |
