1

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 %}
      </select>
    </div>
  </div>
</form>


{# 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. – darylknight Feb 6 '17 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 Feb 6 '17 at 9:52
  • 1
    I disagree as well, the OP clearly mentions how Matrix plays into it. Voting to keep open. – Lindsey D Feb 6 '17 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 Feb 7 '17 at 0:56
  • It doesn't answer how to target the different floors created from the same matrix blocks which is the question – mention79 Feb 7 '17 at 1:00
4

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 }}.
|improve this answer|||||
  • 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 Feb 7 '17 at 0:46
  • Can you mark this as solved if it answers the question @mention79? – darylknight Mar 3 '17 at 16:24

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.