0

введите сюда описание изображенияНужно чтобы стрелочка находилась рядом справа от слова "Link" и не налазила на него, чтобы было адаптивно

(function($) {
    $('.accordion > li:eq(0) a').addClass('active').next().slideDown();

    $('.accordion a').click(function(j) {
        var dropDown = $(this).closest('li').find('p');

        $(this).closest('.accordion').find('p').not(dropDown).slideUp();

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        } else {
            $(this).closest('.accordion').find('a.active').removeClass('active');
            $(this).addClass('active');
        }

        dropDown.stop(false, true).slideToggle();

        j.preventDefault();
    });
})(jQuery);
body {
  font-family: "Open Sans";
  font-size: 13px;
  font-size: 0.8125rem;
  font-weight: 300;
  color: #4a6e78;
}

h1 {
  text-align: center;
  font-size: 35px;
  font-size: 2.1875rem;
  line-height: 1.8;
  padding: 50px 0;
}

.accordion {
  max-width: 560px;
  margin: 0 auto 100px;
  border-top: 1px solid #d9e5e8;
}
.accordion li {
  border-bottom: 1px solid #d9e5e8;
  position: relative;
}
.accordion li p {
  display: none;
  padding: 10px 25px 30px;
  color: #6b97a4;
}
.accordion a {
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
  line-height: 3;
  font-size: 14px;
  font-size: 0.875rem;
  text-indent: 15px;
  user-select: none;
}
.accordion a:after {
  width: 8px;
  height: 8px;
  border-right: 1px solid #4a6e78;
  border-bottom: 1px solid #4a6e78;
  position: absolute;
  right: 350px;
  content: " ";
  top: 17px;
  transform: rotate(45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.accordion p {
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 2;
  padding: 10px;
}

a.active:after {
  transform: rotate(-135deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
  
<h1>Wifire Accordion</h1>

<ul class="accordion">
	<li>
		<a>Link <span class="arrow"></span>
    
    </a>
    
    <span>
      Content 1
    </span>
        <span>
      Content 2
    </span>
        <span>
      Content 3
    </span>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
	</li>
	<li>
		<a>Repellat Odit Aliquid</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
	</li>
	<li>
		<a>Dolor sit Amet</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
	</li>
</ul> <!-- / accordion -->

2
  • Рядом это слева? 7 авг 2017 в 14:26
  • Справа от слова "Link"
    – stiv
    7 авг 2017 в 14:40

2 ответа 2

1

Чтобы стрелка была справа от текста, надо положить ее отдельным элементом после текста.

Добавил элементы .arrow-container и .arrow после спанов, если они есть.

пример

1

Идея - привязать стрелки к правому краю, сделать у блока отступ справа чтобы не налезал текст на стрелку.

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

Все сделано на мой вкус.

Изменил css следующим образом:

.accordion li {
  border-bottom: 1px solid #d9e5e8;
  position: relative;
  padding: 10px 50px 10px 0; /* тут */
}
.accordion a {
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
  line-height: 1; /* тут */
  font-size: 14px;
  font-size: 0.875rem;
  text-indent: 15px;
  user-select: none;
}
.accordion a:after {
  width: 8px;
  height: 8px;
  border-right: 1px solid #4a6e78;
  border-bottom: 1px solid #4a6e78;
  position: absolute;
  right: 10px;  /* тут */
  content: " ";
  top: 17px;
  transform: rotate(45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

пример

По-моему симпотишно.

1
  • Симпотишно, не спорю, но изначально так и было. Мне же требуется под макет именно, приложил в описание картинку, как расположена стрелочка i.stack.imgur.com/1gaOg.png
    – stiv
    8 авг 2017 в 7:34

Ваш ответ

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

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