Помогите пожалуйста с такой задачей. Есть слайдер и текст (который разворачивается при нажатии на кнопку "Читать полностью"). Текст в развернутом виде должен обтекать слайдер. Пробовал overflow:hidden и float:right, но почему-то не работает ( Хотя скорее всего что-то не так делаю, запутался в конец. Приложу два скрина для наглядности (первый-текст свернут, второй-текст развернут). Заранее благодарен!
Вот Html
<article>
<div class="about_us_block">
<div class="title"><img src="images/title/title_2.png" alt="О нас"></div>
<div class="about_txt f18px">Мы начали свой путь точно так же как и Вы сейчас. Долго выбирали свою нишу, считали риски, планировали выручку. Этот путь у нас занял не мало времени, целых четыре года проб и ошибок. Как мы можем теперь сказать - самое главное это выбрать надежного поставщика.<p></p>
Согласитесь, когда у вас уже работает бизнес, вы платите арендную плату, зарплату работникам, даже задержка поставки в один день - это катастрофа. Поэтому мы и стали оптовым поставщиком. У нас у самих боле 9 своих точек расположенных по всему Минску, и мы знаем и понимаем что такое обеспечение бизнеса. Бизнес розничных продаж совсем не простой, и требует от вас усилий.<p></p>
Дело в том что тут очень много факторов от которых зависит прибыль, например, расположение точки, ассортимент, а так же ведение бухгалтерии. Но мы можем вам помочь!
</div>
<div class="txt_more f14px cursor">Читать полностью<img class="more_img" src="images/about_us/more.png" alt="иконка вниз"></div>
<div class="about_txt_full f18px">Мы начали свой путь точно так же как и Вы сейчас. Долго выбирали свою нишу, считали риски, планировали выручку. Этот путь у нас занял не мало времени, целых четыре года проб и ошибок. Как мы можем теперь сказать - самое главное это выбрать надежного поставщика.<p></p>
Согласитесь, когда у вас уже работает бизнес, вы платите арендную плату, зарплату работникам, даже задержка поставки в один день - это катострофа. Поэтому мы и стали оптовым постовщиком. У нас у самих боле 9 своих точек расположенных по всему Минску, и мы знаем и понимаем что такое обеспечение бизнеса. Бизнес розничных продаж совсем не простой, и требует от вас усилий.<p></p>
Дело в том что тут очень много факторов от которых зависит прибыль, например, расположение точки, ассортимент, а так же ведение бухгалтерии. Но мы можем вам помочь! За все это время мы накопили неплохую базу знаний, который готовы с в вами поделиться.<p></p>
Девиз нашей компании – «С нами жизнь слаще!» воплощается в сладкой и полезной продукции. Органические сладости, натуральные конфеты, в которых использованы только полезные для здоровья ингредиенты, представлены в огромном ассортименте. В первую очередь, это всеми любимые леденцы. Натуральные леденцы, как классического карамельного вкуса, так и оригинальных фруктово - ягодных сочетаний неизменно пользуются повышенным спросом. Это самая востребованная у покупателей позиция. Яркие леденцы на палочке – это не просто вкусное угощение, это красивый гостинец.<p></p>
Наша команда использует самое современное оборудование для выпуска сладостей. Еще с детства многие помнят прекрасный фруктовый мармелад, который был густо посыпан сахаром. Сейчас на современном оборудовании выпускается множество разновидностей этого лакомства, но главное качество, из-за которого мармелад любят и дети, и взрослые – это натуральность и полезность. Мы сделали производство мармелада одним из основных направлений.
</div>
<div class="txt_less f14px cursor">Свернуть назад<img class="less_img" src="images/about_us/less.png"></div>
<div class="objects_slider">
<a href="#"><img src="images/objects_slider/object_1.png" alt="Картинка слайдера 1" class="object_slide_img"></a>
<a href="#"><img src="images/objects_slider/object_2.png" alt="Картинка слайдера 2" class="object_slide_img"></a>
<a href="#"><img src="images/objects_slider/object_3.png" alt="Картинка слайдера 3" class="object_slide_img"></a>
<a href="#"><img src="images/objects_slider/object_4.png" alt="Картинка слайдера 4" class="object_slide_img"></a>
<a href="#"><img src="images/objects_slider/object_5.png" alt="Картинка слайдера 5" class="object_slide_img"></a>
<a href="#"><img src="images/objects_slider/object_6.png" alt="Картинка слайдера 6" class="object_slide_img"></a>
</div>
</div>
</article>
Вот css
|
Код:
|
.about_txt {
height: 370px;
width: 540px;
margin: -20px 0 0 25px;
}
.txt_more {
float: left;
margin: 5px 0 15px 420px;
cursor: pointer;
}
.txt_less {
margin: 15px 0 15px 1010px;
cursor: pointer;
display: none;
}
.more_img, .less_img {
margin-left: 5px;
}
.about_txt_full {
height: 100%;
margin: -20px 20px 0 25px;
display: none;
}
.objects_slider {
float: right;
width: 555px;
margin: -387px 25px 0 0;
}
.object_slide_img {
width: 555px;
} |
Вот js для развертки текста
var more = document.querySelectorAll('.txt_more');
[].forEach.call(more, function(el,i) {
el.addEventListener("click", function () {
this.style.display = "none";
el.parentNode.querySelector('.about_txt').style.display = "none";
el.parentNode.querySelector('.about_txt_full').style.display = "block";
el.parentNode.querySelector('.txt_less').style.display = "block";
});
});
var less = document.querySelectorAll('.txt_less');
[].forEach.call(less, function(el,i) {
el.addEventListener("click", function () {
this.style.display = "none";
el.parentNode.querySelector('.about_txt_full').style.display = "none";
el.parentNode.querySelector('.about_txt').style.display = "block";
el.parentNode.querySelector('.txt_more').style.display = "block";
});
});
