Как вывести новое содержимое при нажатии на часть 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>

Вернуться на верх