<p>I'd use a Matrix field with a block for each floor. Adding a block provides fields for an Asset for the floorplan and a text box for the dimensions.</p>

<p>The dropdown is purely javascript based, and I'd suggest you put all the floors in the HTML on page load, then switch between them using the values of the dropdown field.</p>

CC BY-SA 3.0
2017-01-31T21:39:20.013Z
Thanks. I have the floors setup and working via a matrix block finally and it's working well with them all displayed on the page. But I still need to get the select menu working and I'm really struggling on how to get the dropdown to actually switch the content to only show the selected floors. So any ideas would be appreciated on how to do it.
mention79
CC BY-SA 3.0
2017-02-01T15:16:14.790Z
The dropdown isn't really anything related to Craft - you'd need to do that either with handwritten jQuery or a plugin. Something like `$('#dropdown-id').on('change', function(){ //change content displayed here });`
darylknight
CC BY-SA 3.0
2017-01-17T16:40:26.117Z
2017-01-17T16:40:26.117Z
darylknight
<p>On the property development website I'm building for an agency client it has a section on the individual property page that shows the floorplans for the building. Which has different amounts of levels depending on the property. So for example one property might have a basement, a ground floor, and a first floor. Whereas another might have a Ground, First and Second Floor etc.</p>

<p>Each floor has an image of the floorplan as well as text showing the dimensions on the left of it.</p>

<p>On the design visual the floors are switched between using the dropdown button, which lists the available floors.</p>

<p>So I'm not sure how to approach this. Should it be a matrix, or set fields etc, and how will it link up to the dropdown.</p>

<p>Need some guidance on the best approach that's going to make it as simple as possible for the client?</p>

<p>Kind regards</p>

<p>David</p>

<p><a href="https://i.sstatic.net/3k4gv.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/3k4gv.png" alt="enter image description here"></a></p>

<templating><matrix><field>
How to approach a multi-level floorplan
# How to approach a multi-level floorplan

(Asked by: username_0 on 2017-01-17)

On the property development website I'm building for an agency client it has a section on the individual property page that shows the floorplans for the building. Which has different amounts of levels depending on the property. So for example one property might have a basement, a ground floor, and a first floor. Whereas another might have a Ground, First and Second Floor etc.

Each floor has an image of the floorplan as well as text showing the dimensions on the left of it.

On the design visual the floors are switched between using the dropdown button, which lists the available floors.

So I'm not sure how to approach this. Should it be a matrix, or set fields etc, and how will it link up to the dropdown.

Need some guidance on the best approach that's going to make it as simple as possible for the client?

Kind regards

David

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

**Tags:** templating, matrix, field

---

## 1 answers

### Answer by username_1 on 2017-01-17. Score: 4

I'd use a Matrix field with a block for each floor. Adding a block provides fields for an Asset for the floorplan and a text box for the dimensions.

The dropdown is purely javascript based, and I'd suggest you put all the floors in the HTML on page load, then switch between them using the values of the dropdown field.

> **Comments:**
> **username_0**: Thanks. I have the floors setup and working via a matrix block finally and it's working well with them all displayed on the page. But I still need to get the select menu working and I'm really struggling on how to get the dropdown to actually switch the content to only show the selected floors. So any ideas would be appreciated on how to do it.  
> **username_1**: The dropdown isn't really anything related to Craft - you'd need to do that either with handwritten jQuery or a plugin. Something like `$('#dropdown-id').on('change', function(){ //change content displayed here });`  

---

