- How can i shorten or simplify my jquery statements?
- <div class="custom-select list-one">
- <span>Select Option</span>
- <ul>
- <li>List Item 1</li>
- <li>List Item 2</li>
- <li>List Item 3</li>
- <li>List Item 4</li>
- <li>List Item 5</li>
- <li>List Item 6</li>
- <li>List Item 7</li>
- <li>List Item 8</li>
- <li>List Item 9</li>
- <li>List Item 10</li>
- <li>List Item 11</li>
- <li>List Item 12</li>
- </ul>
- </div>
- <div class="custom-select list-two">
- <span>Select Option</span>
- <ul>
- <li>List Item 1</li>
- <li>List Item 2</li>
- <li>List Item 3</li>
- <li>List Item 4</li>
- <li>List Item 5</li>
- <li>List Item 6</li>
- <li>List Item 7</li>
- <li>List Item 8</li>
- <li>List Item 9</li>
- <li>List Item 10</li>
- <li>List Item 11</li>
- <li>List Item 12</li>
- </ul>
- </div>
- //Function for .list-one
- $(function() {
- $('.custom-select.list-one').click(function() {
- $('.custom-select.list-one ul').slideToggle('fast');
- });
- $('.custom-select.list-one ul li').click(function() {
- $(this).addClass('selected');
- $('.custom-select.list-one span')
- .html($('.custom-select.list-one ul li.selected').html());
- $(this).removeClass('selected');
- });
- });
- // Function for .list-two
- $(function() {
- $('.custom-select.list-two').click(function() {
- $('.custom-select.list-two ul').slideToggle('fast');
- });
- $('.custom-select.list-two ul li').click(function() {
- $(this).addClass('selected');
- $('.custom-select.list-two span')
- .html($('.custom-select.list-two ul li.selected').html());
- $(this).removeClass('selected');
- });
- });
- $(function() {
- $('.custom-select').click(function() {
- $(this).find('ul').slideToggle('fast');
- });
- $('.custom-select ul li').click(function() {
- var $this = $(this);
- $this.closest('div').find('span').html($this.html());
- });
- });
- // Function Definition
- function doListStuff(listClass) {
- $(listClass).click(function() {
- $(listClass + ' ul').slideToggle('fast');
- });
- $(listClass +' ul li').click(function() {
- $(this).addClass('selected');
- $(listClass + ' span')
- .html($(listClass + ' ul li.selected').html());
- $(this).removeClass('selected');
- });
- }
- //Function for .list-one
- $(function() {
- doListStuff('.custom-select.list-one');
- });
- //Function for .list-two
- $(function() {
- doListStuff('.custom-select.list-two');
- });