<p>At the risk of this question being closed for being too broad, there are a couple ways to handle this.</p>
<p>Unlike other CMS such as WordPress, in Craft CMS, the front end code is up to you. If you don't have any experience with HTML or CSS, you're going to need to get that experience first.</p>
<p>Assuming you have front end development experience, I'd recommend the <a href="https://craftcms.com/docs/3.x/dev/twig-primer.html#types-of-twig-code" rel="nofollow noreferrer">Introduction to Templating</a> page inside the Craft CMS documentation. <a href="https://twig.symfony.com/" rel="nofollow noreferrer">Twig</a> is a different, but great templating  language for PHP.</p>
<p>In general, the way I work, I usually build the HTML and CSS outside of Craft first. When I have a good base, then I bring in the CMS related elements where you need them.</p>
<p>From your example, I can't tell if that's a mockup or production code but it looks like you're going to be making use of some sort of &quot;accordion&quot; UI component.</p>
<p>You could use something like one of the premade <a href="https://get.foundation/sites/docs/accordion.html" rel="nofollow noreferrer">Foundation</a> or  <a href="https://getbootstrap.com/docs/5.0/components/accordion/" rel="nofollow noreferrer">Bootstrap</a> components or if your project already has something like that built in, check out how it's built already by visiting the <a href="https://craftcms.com/docs/3.x/directory-structure.html" rel="nofollow noreferrer"><code>templates</code></a> folder inside your project.</p>
<p>From there, if those booking links aren't being stored in Craft at all, you could just hardcode them in. But I'm also guessing those links could change at some point so maybe you use a <a href="https://craftcms.com/docs/3.x/globals.html" rel="nofollow noreferrer">Globals field</a> to store them.</p>
<p>With knowing more it's hard to recommend a path but hopefully that gets you going.</p>

CC BY-SA 4.0
2021-06-29T14:28:32.540Z
2021-06-29T14:33:40.377Z
2021-06-29T14:33:40.377Z
RitterKnight
<p>I have a situation where I need to display booking links when the user selects a location from the dropdown list.</p>
<p>I have 30+ locations. Each location may have 3-5 different booking page links.</p>
<p>May I know how can I achieve this kind of problem in Craft CMS?</p>
<p><a href="https://i.sstatic.net/hgIj1.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/hgIj1.png" alt="enter image description here" /></a></p>
<p>here is an example of what I want to achieve.</p>

CC BY-SA 4.0
2021-06-29T13:51:17.257Z
Do you want this functionality in the backend (CMS / Craft interface) or frontend of your site? For the backend, you might be able to do this with a lot of conditional fields using the [reasons plugin](https://plugins.craftcms.com/reasons). For the frontend, there are a number of way to solve this using server-side or client-side code. What have you tried so far? Why isn't it working? As it stands this question is way too broad to be answerable, you should add more details and a more specific question.
MoritzLost
CC BY-SA 4.0
2021-06-29T14:02:13.753Z
I just want this function to be on the front end site only. There is no saving or updating database work. It is just showing the links when the user has selected the value from the dropdown option. To be honest, I haven't tried out anything yet since I'm not the one who built this website. My task just to add this function to a existing page and this is my first time using Craft CMS. If you don't mind, can you share some links that I can refer to for this problem?
Aima
CC BY-SA 4.0
2021-06-29T14:10:13.380Z
Hey Aima, the thing is that this isn't really a Craft-related question in this case. It depends very much of how the site is built. If your screenshot comes from some kind of frontend app (using React or Vue, for example), you will need to edit that to add the required functionality. Of course, you will need to update the entry fields to accomodate your links and either update your API (if the frontend is an app) or your templates (if the site is rendered server-side). Beyond that, it's just JavaScript to handle loading/displaying content based on the user selection.
MoritzLost
CC BY-SA 4.0
2021-06-29T14:12:28.377Z
There are many way to build this, and it depends heavily on the exsting setup. And for every approach, there are multiple problems to be solved. For example, how to add the required fields to the Craft entries, how to add the required output in your templates/API and how to load/display content based on the problem. Nobody is gonna write a step-by-step guide for that, its not even possible without knowing much more about your setup. What you might wanna do is describe your site in more detail and ask a more specific question that can actually be answered without writing a book :)
MoritzLost
<drop-down>
Show specific values when dropdown is select
# Show specific values when dropdown is select

(Asked by: username_0 on 2021-06-29)

I have a situation where I need to display booking links when the user selects a location from the dropdown list.

I have 30+ locations. Each location may have 3-5 different booking page links.

May I know how can I achieve this kind of problem in Craft CMS?

[![enter image description here](https://i.sstatic.net/hgIj1.png)](https://i.sstatic.net/hgIj1.png)

here is an example of what I want to achieve.

**Tags:** drop-down

> **Comments:**
> **username_1**: Do you want this functionality in the backend (CMS / Craft interface) or frontend of your site? For the backend, you might be able to do this with a lot of conditional fields using the [reasons plugin](https://plugins.craftcms.com/reasons). For the frontend, there are a number of way to solve this using server-side or client-side code. What have you tried so far? Why isn't it working? As it stands this question is way too broad to be answerable, you should add more details and a more specific question.  
> **username_0**: I just want this function to be on the front end site only. There is no saving or updating database work. It is just showing the links when the user has selected the value from the dropdown option. To be honest, I haven't tried out anything yet since I'm not the one who built this website. My task just to add this function to a existing page and this is my first time using Craft CMS. If you don't mind, can you share some links that I can refer to for this problem?  
> **username_1**: Hey username_0, the thing is that this isn't really a Craft-related question in this case. It depends very much of how the site is built. If your screenshot comes from some kind of frontend app (using React or Vue, for example), you will need to edit that to add the required functionality. Of course, you will need to update the entry fields to accomodate your links and either update your API (if the frontend is an app) or your templates (if the site is rendered server-side). Beyond that, it's just JavaScript to handle loading/displaying content based on the user selection.  
> **username_1**: There are many way to build this, and it depends heavily on the exsting setup. And for every approach, there are multiple problems to be solved. For example, how to add the required fields to the Craft entries, how to add the required output in your templates/API and how to load/display content based on the problem. Nobody is gonna write a step-by-step guide for that, its not even possible without knowing much more about your setup. What you might wanna do is describe your site in more detail and ask a more specific question that can actually be answered without writing a book :)  

---

## 1 answers

### Answer by username_2 on 2021-06-29. Score: 1 | Accepted answer

At the risk of this question being closed for being too broad, there are a couple ways to handle this.

Unlike other CMS such as WordPress, in Craft CMS, the front end code is up to you. If you don't have any experience with HTML or CSS, you're going to need to get that experience first.

Assuming you have front end development experience, I'd recommend the [Introduction to Templating](https://craftcms.com/docs/3.x/dev/twig-primer.html#types-of-twig-code) page inside the Craft CMS documentation. [Twig](https://twig.symfony.com/) is a different, but great templating language for PHP.

In general, the way I work, I usually build the HTML and CSS outside of Craft first. When I have a good base, then I bring in the CMS related elements where you need them.

From your example, I can't tell if that's a mockup or production code but it looks like you're going to be making use of some sort of "accordion" UI component.

You could use something like one of the premade [Foundation](https://get.foundation/sites/docs/accordion.html) or [Bootstrap](https://getbootstrap.com/docs/5.0/components/accordion/) components or if your project already has something like that built in, check out how it's built already by visiting the [`templates`](https://craftcms.com/docs/3.x/directory-structure.html) folder inside your project.

From there, if those booking links aren't being stored in Craft at all, you could just hardcode them in. But I'm also guessing those links could change at some point so maybe you use a [Globals field](https://craftcms.com/docs/3.x/globals.html) to store them.

With knowing more it's hard to recommend a path but hopefully that gets you going.


---

