0

Подскажите пожалуйста как сделать раздел услуги активным, чтобы при открытии страницы он уже был открытым

  $('.accordion-item .heading').on('click', function(e) {
    e.preventDefault();

    // Add the correct active class
    if($(this).closest('.accordion-item').hasClass('active')) {
        // Remove active classes
        $('.accordion-item').removeClass('active');
    } else {
        // Remove active classes
        $('.accordion-item').removeClass('active');

        // Add the active class
        $(this).closest('.accordion-item').addClass('active');
    }

    // Show the content
    var $content = $(this).next();
    $content.slideToggle(500);
    $('.accordion-item .content').not($content).slideUp('fast');
  });
.accordion{
  width: 100%;}

.accordion-item{
  position: relative;
  padding: 17px 0;}
.accordion-item .active .heading {
      color: #000;}
      
.accordion-item .heading{
    display: block;
    text-decoration: none;
    color: #000;
    text-align: left;
    font-size: 17px;
    position: relative;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;}
  .icon{
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 3px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);}
    .icon:before{
      content: '';
      width: 1.5rem;
      height: 0.2rem;
      background: #000;
      position: absolute;
      border-radius: 1px;
      left: 50%;
      top: 50%;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);}
    .icon:after{
      content: '';
      width: 1.5rem;
      height: 0.2rem;
      background: #000;
      position: absolute;
      border-radius: 1px;
      left: 50%;
      top: 50%;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%) rotate(90deg);
      transform: translate(-50%, -50%) rotate(90deg);
      z-index: -1;}
.content{
  display: none;
  position: relative;
  margin-top: 15px;}
.content p{
  margin: 0;
  padding: 0;
  text-align: left;
  padding-left: 12%;
  color: #222;
  font-size: 16px;}
.content a {
  color: #222;
  display: block;}
.title {
  padding-left: 8.5%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="accordion">

							    <div class="accordion-item">
							        <a href="#" class="heading">
							            <div class="icon"></div>
							            <div class="title">Услуги</div>
							        </a>
							        <div class="content">
							            <p>
							          		<a href="#r">Победная рассылка</a>
							          		<a href="#r">Проверка контрагентов</a>
							          		<a href="#r">Создание упаковки бизнеса</a>
							          		<a href="#r">Компаниям - заказчикам</a>
							          		<a href="#r">Соискателям</a>
							          		<a href="#r">Финансовая помощь</a>
							          		<a href="#r">Юридическое сопровождение</a>
							          		<a href="#r">Лицензирование и сертификация</a>
													</p>
							        </div>
							    </div>

							    <div class="accordion-item">
							        <a href="#" class="heading">
							            <div class="icon"></div>
							            <div class="title">Тарифы</div>
							        </a>
							        <div class="content">
							            <p>
							          		<a href="#r">1</a>
							          		<a href="#r">1</a>
							          		<a href="#r">1</a>
							          		<a href="#r">1</a>
							          		<a href="#r">1</a>
							          	</p>
							        </div>
							    </div>

								</div>

3
  • Через добавление класса, как вариант.
    – user262779
    3 апр 2018 в 12:34
  • пробовал, работает но криво, если переключаешь дальше зависает первый 3 апр 2018 в 12:36
  • сгенерировать клик на нужной вкладке developer.mozilla.org/ru/docs/Web/API/Event/Event
    – Dmytro
    3 апр 2018 в 12:47

2 ответа 2

1

let b = document.getElementById('b')
b.addEventListener('click',()=>{
console.log('qwa')})
var click = new MouseEvent('click', {
	'view': window,
	'bubbles': true,
	'cancelable': true
 });
b.dispatchEvent(click)
<button id="b">батон</button>

https://developer.mozilla.org/ru/docs/Web/Guide/Events/Создание_и_вызов_событий

0

  $('.accordion-item:first .heading').closest('.accordion-item').addClass('active');
     // Show the content
     var $defContent = $('.accordion-item:first .heading').next();
    $defContent.slideToggle(500);
 
 $('.accordion-item .heading').on('click', function(e) {
    e.preventDefault();

    // Add the correct active class
    if($(this).closest('.accordion-item').hasClass('active')) {
        // Remove active classes
        $('.accordion-item').removeClass('active');
    } else {
        // Remove active classes
        $('.accordion-item').removeClass('active');

        // Add the active class
        $(this).closest('.accordion-item').addClass('active');
    }

    // Show the content
    var $content = $(this).next();
    $content.slideToggle(500);
    $('.accordion-item .content').not($content).slideUp('fast');
  });
.accordion{
  width: 100%;}

.accordion-item{
  position: relative;
  padding: 17px 0;}
.accordion-item .active .heading {
      color: #000;}
      
.accordion-item .heading{
    display: block;
    text-decoration: none;
    color: #000;
    text-align: left;
    font-size: 17px;
    position: relative;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;}
  .icon{
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 3px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);}
    .icon:before{
      content: '';
      width: 1.5rem;
      height: 0.2rem;
      background: #000;
      position: absolute;
      border-radius: 1px;
      left: 50%;
      top: 50%;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);}
    .icon:after{
      content: '';
      width: 1.5rem;
      height: 0.2rem;
      background: #000;
      position: absolute;
      border-radius: 1px;
      left: 50%;
      top: 50%;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%) rotate(90deg);
      transform: translate(-50%, -50%) rotate(90deg);
      z-index: -1;}
.content{
  display: none;
  position: relative;
  margin-top: 15px;}
.content p{
  margin: 0;
  padding: 0;
  text-align: left;
  padding-left: 12%;
  color: #222;
  font-size: 16px;}
.content a {
  color: #222;
  display: block;}
.title {
  padding-left: 8.5%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="accordion">

							    <div class="accordion-item">
							        <a href="#" class="heading">
							            <div class="icon"></div>
							            <div class="title">Услуги</div>
							        </a>
							        <div class="content">
							            <p>
							          		<a href="#r">Победная рассылка</a>
							          		<a href="#r">Проверка контрагентов</a>
							          		<a href="#r">Создание упаковки бизнеса</a>
							          		<a href="#r">Компаниям - заказчикам</a>
							          		<a href="#r">Соискателям</a>
							          		<a href="#r">Финансовая помощь</a>
							          		<a href="#r">Юридическое сопровождение</a>
							          		<a href="#r">Лицензирование и сертификация</a>
													</p>
							        </div>
							    </div>

							    <div class="accordion-item">
							        <a href="#" class="heading">
							            <div class="icon"></div>
							            <div class="title">Тарифы</div>
							        </a>
							        <div class="content">
							            <p>
							          		<a href="#r">1</a>
							          		<a href="#r">1</a>
							          		<a href="#r">1</a>
							          		<a href="#r">1</a>
							          		<a href="#r">1</a>
							          	</p>
							        </div>
							    </div>

								</div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.