Как заставить javascript открыть 2-ой accordion?

248
19 марта 2017, 05:40

Доброй день.

Есть код аккордеона:

$(function() { 
  var Accordion = function(el, multiple) { 
    this.el = el || {}; 
    this.multiple = multiple || false; 
 
    // Variables privadas 
    var links = this.el.find('.link'); 
    // Evento 
    links.on('click', { 
      el: this.el, 
      multiple: this.multiple 
    }, this.dropdown) 
  } 
 
  Accordion.prototype.dropdown = function(e) { 
    var $el = e.data.el; 
    $this = $(this), 
      $next = $this.next(); 
 
    $next.slideToggle(); 
    $this.parent().toggleClass('open'); 
 
    if (!e.data.multiple) { 
      $el.find('.submenu').not($next).slideUp().parent().removeClass('open'); 
    }; 
  } 
 
  var accordion = new Accordion($('#accordion'), false); 
});
ul { 
  list-style-type: none; 
} 
 
a { 
  color: black; 
  text-decoration: none; 
} 
 
 
/** ======================= 
 * Contenedor Principal 
 ===========================*/ 
 
.accordion { 
  background: #f9fBfC; 
  min-height: 272px; 
  margin-top: 31px; 
  width: 215px; 
  margin-left: -15px; 
} 
 
.accordion .link { 
  max-height: 390px; 
  cursor: pointer; 
  display: block; 
  margin-top: -18px; 
  padding: 28px 12px 9px; 
  color: #4D4D4D; 
  font-size: 14px; 
  font-weight: 800; 
  border-bottom: 4px solid #b9b9e5; 
  position: relative; 
  -webkit-transition: all 0.3s ease; 
  -o-transition: all 0.3s ease; 
  transition: all 0.3s ease; 
} 
 
.accordion li:last-child .link { 
  border-bottom: 10; 
} 
 
.accordion li i { 
  position: absolute; 
  top: 1px; 
  left: -12px; 
  font-size: 10px; 
  color: black; 
  -webkit-transition: all 0.4s ease; 
  -o-transition: all 0.4s ease; 
  transition: all 0.4s ease; 
} 
 
.accordion li i.fa-chevron-down { 
  right: 12px; 
  left: auto; 
  font-size: 12px; 
} 
 
.accordion li.open .link { 
  color: #352a00; 
} 
 
.accordion li.open i { 
  color: #f2f2f2; 
} 
 
.accordion li.open i.fa-chevron-down { 
  -webkit-transform: rotate(180deg); 
  -ms-transform: rotate(180deg); 
  -o-transform: rotate(180deg); 
  transform: rotate(180deg); 
  max-height: 290px; 
} 
 
.accordion li.default .submenu { 
  display: block; 
} 
 
 
/** 
 * Submenu 
 -----------------------------*/ 
 
.submenu { 
  max-height: 290px; 
  display: none; 
  background: ; 
  font-size: 13px; 
} 
 
.submenu li { 
  border-bottom: 2px solid black; 
} 
 
.submenu a { 
  max-height: 290px; 
  display: block; 
  text-decoration: none; 
  color: #010523; //цвет текста  
  font-family: bold; 
  padding-top: 4px; 
  padding-left: 62px; 
  -webkit-transition: all 0.25s ease; 
  -o-transition: all 0.25s ease; 
  transition: all 0.25s ease; 
} 
 
.submenu a:hover { 
  background: #75788c; 
  color: #FFF; 
  font-size: 14px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul id="accordion" class="accordion"> 
  <li> 
    <div class="link"><i class="fa fa-paint-brush"></i>Trust rating<i class="fa fa-chevron-down"></i></div> 
    <ul class="submenu tab-content" id="Trust_rating"> 
      <li><a data-toggle="tab" href="#Raise_rating" href="#">Raise rating</a></li> 
      <li><a data-toggle="tab" href="#Talk_about_you" href="#">Talk about you</a></li> 
      <li><a data-toggle="tab" href="#Offers_to_join" href="#">Offers to join</a></li> 
 
    </ul> 
  </li> 
  <li> 
    <div class="link"><i class="fa fa-code"></i>Activity<i class="fa fa-chevron-down"></i></div> 
    <ul class="submenu tab-content"> 
      <li id="main_list_item"><a data-toggle="tab" href="#All1" href="#">All</a></li> 
      <li id="main_list_item"><a data-toggle="tab" href="#Contacts1" href="#">Contacts</a></li> 
    </ul> 
  </li> 
  <li> 
    <div class="link"><i class="fa fa-mobile"></i>Result<i class="fa fa-chevron-down"></i></div> 
    <ul class="submenu tab-content"> 
      <li id="main_list_item"><a data-toggle="tab" href="#All2" href="#">All</a></li> 
      <li id="main_list_item"><a data-toggle="tab" href="#Contacts2" href="#">Contacts</a></li> 
    </ul> 
  </li> 
  <li> 
    <div class="link"><i class="fa fa-globe"></i>Social networks<i class="fa fa-chevron-down"></i></div> 
    <ul class="submenu tab-content"> 
      <li id="main_list_item"><a data-toggle="tab" href="Name_sotial_network" href="#"> Name sotial network</a></li> 
      <li id="main_list_item"><a data-toggle="tab" href="Name_sotial_network" href="#"> Name sotial network</a></li> 
      <li id="main_list_item"><a data-toggle="tab" href="Name_sotial_network" href="#"> Name sotial network</a></li> 
    </ul> 
  </li> 
</ul>

Я сделал 2-ой такой же Accordion с теми же свойствами, но он не работает (не раскрывается). Видимо дело все в JavaScript. Подскажите пожалуйста, что не так?

Пояснения работы кода - Как звучит данный сценарий аккордеона?

READ ALSO
Как пользоваться vue-resource для Vue.js?

Как пользоваться vue-resource для Vue.js?

Взял пример код со страницы https://githubcom/pagekit/vue-resource и попытался применить https://jsfiddle

452
Как сделать такую форму?

Как сделать такую форму?

Как сделать такую форму?

267
Bootstrap слайдер

Bootstrap слайдер

Создал слайдер на бутстрапе, но есть такой минус, когда курсор находится в контейнере, то слайдер перестает автоматически менять изображения,...

301
Ошибка в записывании даты в postgresql

Ошибка в записывании даты в postgresql

Входные данные:2017-03-15

258