Не выезжает блок сбоку
Здравствуйте, у меня есть такой код, и по задумке при нажатии на картинку выезжает блок перекрывающий все картинки, но он не появляется, что неправильно?
Код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>пункт 3</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id='products' class="sections_description">
<div id='section_tax' class ="sections">
<div class="blocks">
<div class="section_caption">
<img src="img/JQuery.jpg" alt="">
</div>
<div class="section_caption">
<img src="img/react.png" alt="">
</div>
<div class="section_caption">
<img src="img/AngularJS.jpg" alt="">
</div>
<div class="blocks">
<div class="section_caption">
<img src="img/Vue.jpg" alt="">
</div>
<div class="section_caption">
<img src="img/Ember.png" alt=""></div>
<div class="section_caption">
<img src="img/Knockout.jpg" alt=""></div>
</div>
<div class="section_caption" onclick="toggleVisibility('description_debt');">
<div class='description_blocks'>
<div class='description'>
<p>Самая популярная js-библиотека всех времен. Она произвела революцию в программировании клиентской части веб-приложений, введя селекторы CSS для доступа к узлам DOM-дерева, обработчики событий, анимации и ajax-запросы.
В последнее время jQuery утрачивает былую популярность, но по-прежнему остается жизнеспособным вариантом для проектов, требующих небольшого js-функционала.</p>
<p>Плюсы:
Малый размер дистрибутива,
низкий порог вхождения, исчерпывающая документация в интернете,
лаконичный синтаксис,
легко расширяемый.</p>
<p>Минусы:
замедляет работу приложения,
может повлечь проблемы совместимости с браузером,
сообщество разработчиков протестует против его повсеместного использования.</p>
</div>
<div class='description'>
<p>
Самая горячо обсуждаемая библиотека прошедшего года. React претендует на роль библиотеки для создания пользовательских интерфейсов. Он фокусируется на «View»-части MVC-разработки и позволяет создавать компоненты интерфейса, сохраняющие свое состояние. Это была одна из первых библиотек, реализующих виртуальное DOM-дерево.
Статистика использования React может показаться довольно низкой из-за того, что он используется в основном в приложениях, а не на сайтах.</p>
<p>
Плюсы:
Компактность, эффективность, производительность и гибкость,
простая модель компонентов,
хорошая документация и обилие онлайн-ресурсов,
возможность рендеринга на стороне сервера,
растущая популярность.
</p>
<p>
Минусы:
новые концепции и синтаксис, которые придется изучить,
необходимы системы сборки,
может требовать сторонних инструментов и библиотек,
может быть несовместим с кодом и другими библиотеками, модифицирующими DOM-дерево.
</p>
</div>
<div class='description'>
<p>Первый фреймворк (или MVC фреймворк) в нашем списке. Наиболее популярной является версия 1.х, расширяющая HTML двусторонней привязкой данных одновременно с разделением манипуляций с DOM и логики приложения.
Angular 1.x до сих пор находится в разработке, несмотря на версию 2 (которая теперь версия 4!
</p>
<p>
Плюсы:
популярный фреймворк, поддерживаемый несколькими крупными компаниями,
универсальное решение для создания современных веб-приложений,
часть «стандартного» стека MEAN (MongoDB, Express.JS, AngularJS, NodeJS), доступны множество статей и туториалов.
</p>
<p>
Минусы:
сложнее в освоении в сравнении с некоторыми альтернативами,
обширная база кода,
несовместимость с Angular 2.x,
несмотря на то, что является проектом Google, самим Google не используется.
</p>
</div>
<div class='description'>
<p>Легкий современный фреймворк для создания пользовательских интерфейсов. Предлагает React-подобный виртуальный слой ст поддержкой DOM, который может быть интегрирован с другими библиотеками.
Vue.js использует синтаксис шаблона HTML для связки DOM и данных. Модели являются простыми js-объектами, которые перестраивают интерфейс и/или контент при изменении данных.</p>
<p>
Плюсы:
зрительские симпатии и растущая популярность,
прост в освоении с нуля,
мало зависимостей и хорошая производительность.
</p>
<p>Минусы:
молодой проект — высокие риски,
меньше ресурсов, чем у альтернатив.</p>
</div>
<div class='description'>
<p>Один из крупнейших фреймворков, основанных на модели MVVM. Он реализует шаблонизацию, связывание данных и библиотеки.</p>
<p>Плюсы:
единое решение для клиентских приложений,
позволяет разработчикам быть продуктивными (использует jQuery),
хорошая обратная совместимость,
одобряется современными стандартами веб-разработки.</p>
<p>Минусы:
большой дистрибутив,
считается монолитным по сравнению с другими фреймворками, основывающимися на модульной модели,
непрост в изучении.</p>
</div>
<div class='description'>
<p>Старейший MVVM фреймворк, использующий обозреватели для отслеживания состояния интерфейса. Поддерживает шаблонизацию и отслеживание зависимостей.</p>
<p>Плюсы:
легковесный и не имеет зависимостей,
прекрасная поддержка браузеров вплоть до IE6,
хорошая документация.</p>
<p>Минусы:
вносит излишнюю сложность в большие проекты,
разработка замедлилась,
популярность сходит на нет.</p>
</div>
</div>
</div>
<script>
document.querySelectorAll('.section_caption').forEach((el, i)=> el.onclick =()=> querySelectorAll('.description')[i].style.left = 0);
document.querySelectorAll('.description').forEach(el=> el.onclick =()=> el.style.left = '-120%');
</script>
</body>
</html>
.sections {
margin: 0 auto;
height: 100%;
width: 90%;
display: flex;
flex-flow: column wrap;
justify-content: center;
z-index: 1;
position: relative;
}
.blocks {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.section_caption {
height: 150px;
width: 20%;
display: flex;
justify-content: center;
background: white;
flex-flow: row nowrap;
margin: 2% ;
cursor: pointer;
}
.description {
display: block;
position: absolute;
top: 0;
left:-110%;
width: 100%;
height: 100%;
background: rgba(0,0,0, 0.8);
z-index: 5;
transition: 5s;
}
.description p{
font-size: 22px;
color: #fff;
margin-left: 10px;
}
|