|
|
| Line 14: |
Line 14: |
| | <script src="//use.edgefonts.net/aladin.js"></script> | | <script src="//use.edgefonts.net/aladin.js"></script> |
| | | | |
| − | <style>
| |
| − |
| |
| − | @import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600');
| |
| − |
| |
| − | * {
| |
| − | box-sizing: border-box;
| |
| − | font-family: 'Open Sans',sans-serif;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | a {
| |
| − | text-decoration: none;
| |
| − | color: inherit;
| |
| − | }
| |
| − |
| |
| − | p {
| |
| − | font-size:1.1em;
| |
| − | margin: 1em 0;
| |
| − | }
| |
| − |
| |
| − | .description {
| |
| − | margin: 1em auto 2.25em;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | width: 40%;
| |
| − | min-width: 300px;
| |
| − | max-width: 400px;
| |
| − | margin: 1.5em auto;
| |
| − | color: #333;
| |
| − | }
| |
| − |
| |
| − | h1 {
| |
| − | font-family: 'Pacifico', cursive;
| |
| − | font-weight: 400;
| |
| − | font-size: 2.5em;
| |
| − | }
| |
| − |
| |
| − | ul {
| |
| − | list-style: none;
| |
| − | padding: 0;
| |
| − |
| |
| − | .inner {
| |
| − | padding-left: 1em;
| |
| − | overflow: hidden;
| |
| − | display: none;
| |
| − |
| |
| − | &.show {
| |
| − | /*display: block;*/
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | li {
| |
| − | margin: .5em 0;
| |
| − |
| |
| − | a.toggle {
| |
| − | width: 100%;
| |
| − | display: block;
| |
| − | background: rgba(0,0,0,0.78);
| |
| − | color: #fefefe;
| |
| − | padding: .75em;
| |
| − | border-radius: 0.15em;
| |
| − | transition: background .3s ease;
| |
| − |
| |
| − | &:hover {
| |
| − | background: rgba(0, 0, 0, 0.9);
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | $('.toggle').click(function(e) {
| |
| − | e.preventDefault();
| |
| − |
| |
| − | var $this = $(this);
| |
| − |
| |
| − | if ($this.next().hasClass('show')) {
| |
| − | $this.next().removeClass('show');
| |
| − | $this.next().slideUp(350);
| |
| − | } else {
| |
| − | $this.parent().parent().find('li .inner').removeClass('show');
| |
| − | $this.parent().parent().find('li .inner').slideUp(350);
| |
| − | $this.next().toggleClass('show');
| |
| − | $this.next().slideToggle(350);
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | <body>
| |
| − |
| |
| − | <div class="w3-center">
| |
| − |
| |
| − | <ul class="accordion">
| |
| − | <li>
| |
| − | <a class="toggle" href="javascript:void(0);">Item 1</a>
| |
| − | <ul class="inner">
| |
| − | <li>Option 1</li>
| |
| − | <li>Option 2</li>
| |
| − | <li>Option 3</li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <a class="toggle" href="javascript:void(0);">Item 2</a>
| |
| − | <ul class="inner">
| |
| − | <li>Option 1</li>
| |
| − | <li>Option 2</li>
| |
| − | <li>Option 3</li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <a class="toggle" href="javascript:void(0);">Item 3</a>
| |
| − | <ul class="inner">
| |
| − | <li>
| |
| − | <a href="#" class="toggle">Open Inner</a>
| |
| − | <div class="inner">
| |
| − | <p>
| |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
| |
| − | blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
| |
| − | </p>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <a href="#" class="toggle">Open Inner #2</a>
| |
| − | <div class="inner">
| |
| − | <p>
| |
| − | Children will automatically close upon closing its parent.
| |
| − | </p>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li>Option 3</li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <a class="toggle" href="javascript:void(0);">Item 4</a>
| |
| − | <ul class="inner">
| |
| − | <li>
| |
| − | <a href="#" class="toggle">Technically any number of nested elements</a>
| |
| − | <ul class="inner">
| |
| − | <li>
| |
| − | <a href="#" class="toggle">Another nested element</a>
| |
| − | <div class="inner">
| |
| − | <p>
| |
| − | As long as the inner element has inner as one of its classes then it will be toggled.
| |
| − | </p>
| |
| − | <p>
| |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
| |
| − | blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
| |
| − | </p>
| |
| − | </div>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li>Option 2</li>
| |
| − |
| |
| − | <li>Option 3</li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </body>
| |
| | | | |
| | | | |
| | </html> | | </html> |
| | {{Northwestern_Page_Foot}} | | {{Northwestern_Page_Foot}} |
