Как вывести новое содержимое при нажатии на часть div
Название, вероятно, сбивает с толку, но лучшего способа задать вопрос не существует. Я делаю сайт для поиска работы, используя django. Я не очень опытен в front end. Я хочу, чтобы отображался список предложений о работе и при нажатии на одно из них появлялась увеличенная версия с дополнительной информацией (кнопка Apply, подробное описание) о конкретном предложении. Вроде того, как это делает linkedin. Вот код, который я использую для вывода списка всех вакансий.
Я знаю, что мне, вероятно, понадобится динамический url, но я не знаю, как реализовать это на фронт-энде. Comps - это просто список всех объектов в модели для компаний.
{% for comp in comps %}
<div class="CompList">
<span>{{comp.jtitle}}</span>
<h2>{{comp.name}}</h2>
<h3>{{comp.country}}, {{comp.city}}</h3>
</div>
{% endfor %}
То, что вы ищете, называется Accordion
, по которому вы найдете множество руководств, использующих JS или "CSS-Hacks".
Не менее известными являются <details>
- и <summary>
-теги, которые можно использовать для достижения этой цели с помощью чистого HTML.
details
включает в себя весь заголовок и описание, а summary
- только видимый заголовок. Как только вы щелкните по нему, он развернется и покажет остальное:
/* CSS only for viszualisation purpose */
details {
border: 2px solid black;
border-radius: 7px;
padding: 10px;
}
summary {
list-style: none;
font-size: 1.5em;
}
<details>
<summary>Job Title</summary>
<p>Long job description<br>
can be added<br>
right after the<br>
summary tag</p>
</details>