I need a little bit of assitance. I have a matrix block that outputs floorplans diagrams and it's specification per floor in a property (see screenshot attached below.

I've got the matrix fields outputting correctly on the page, but I need to get it to only output a single floor at a time, and not all floors, and then let the user click on a select dropdown to change to the floor level that they want to view.

Here's the current markup:

Hopefully someone can help to get it working?

<form class="form" action="{{ entry.url }}" method="get">
  <div class="form-group">
    <div class="selectwrap">
      <select id="development1" class="form-control" name="floor" onchange="this.form.submit()">
        <option value="">Select Floor</option>
        {% for block in entry.floorplans %}
        <option value="{{ block.floorplanlevel }}">{{ block.floorplanlevel.label }}</option>
        {% endfor %}

{# Start Matrix Block #}
{% for block in entry.floorplans %} {# Main Field Handle #}
{% switch block.type %}

{% case "floorplan" %} {# Matrix Block Type Handle #}

enter image description here

  • 1
    I'm voting to close this question as off-topic because it's not related to Craft CMS specifically. Commented Feb 6, 2017 at 9:49
  • I disagree. The question is how can I link these matrix blocks to the drop down select. An answer would be appreciated
    – mention79
    Commented Feb 6, 2017 at 9:52
  • 1
    I disagree as well, the OP clearly mentions how Matrix plays into it. Voting to keep open.
    – Lindsey D
    Commented Feb 6, 2017 at 17:40
  • It looks like you got a perfectly fine answer from @darylknight already in the comments to your related question craftcms.stackexchange.com/questions/18565/…, did you miss that?
    – carlcs
    Commented Feb 7, 2017 at 0:56
  • It doesn't answer how to target the different floors created from the same matrix blocks which is the question
    – mention79
    Commented Feb 7, 2017 at 1:00

1 Answer 1


Two options:

  • Physically output all the floorplans in the markup {% for block in entry.matrixHandle%} then hide them using CSS, and only display the one from the dropdown using JavaScript. Something like $('#dropdown-id).on('change', function(){});
  • Change the field from a Matrix so that each floorplan is a separate Entry and you visit each one with an href="{{ entry.url }}.
  • You should mention that you are talking about a JavaScript powered toggle implementation. Which is also the reason why it's not really a Craft specific problem to solve.
    – carlcs
    Commented Feb 7, 2017 at 0:46
  • Can you mark this as solved if it answers the question @mention79? Commented Mar 3, 2017 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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