The title is probably confusing but there isnt a better way to ask the question. Im making a job searching website using django. Im not really experienced in the front end. I want a list of job offers to be showing and when one of them is clicked I want a enlarged version with additional info(Apply button, detailed description) to appear of the specific job offer clicked. Sort of like how it linkedin does it. This is the code I am using for listing out all of the jobs.

I know I will probably need a dynamic url but from there I dont know how to implement it on the front end. Comps is just a list of all of the objects in a Model for Companies.

{% for comp in comps %}

    <div >
        <span>{{comp.jtitle}}</span>
        <h2>{{comp.name}}</h2>
        <h3>{{comp.country}}, {{comp.city}}</h3>
    </div>


{% endfor %}

CodePudding user response：

What you lookign for is called Accordion to which you find many tutorials using JS or "CSS-Hacks".

However less know are the <details>- and <summary>-tags you can use to accomplish this with pure HTML.

details wraps all the title and the description while summary will eb the visible title. As soon as you click it, it will expand and also show the rest:

/* 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>