1

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

|improve this question
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.

|improve this answer
  • 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 Jan 31 '17 at 21:39
  • 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 Feb 1 '17 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.