How can I display specific sections using a navigation button?

Store Design
1

Hello, I have built a page with nav and sections. I want only one section to appear according to the button clicked by the user. Is there a way to do this? Do I need to code for the nav to live inside the page and have if statements for each button to display the {% section ‘product_orders’ %} ? Or is it best to develope a page for each one and just have the link on the nav take you to the page?

Thank you in advance!

Nav Code:


    

          

{{ section.settings.header }}

      

      

---

    {% for block in section.blocks %}
            
              
                {{ block.settings.button }}
      			
              

    {% endfor %}

			

                
              ### [Email](mailto:service@thehydrojug.com)
              

For larger issues please email us [HERE](mailto:service@thehydrojug.com)

Section code:

{% if section.settings.header != '' %}

  

    # {{ section.settings.header }}
    

---

    
    {% for block in section.blocks %}
            
              
            

{{ block.settings.container_text }}

              {% if block.settings.title != blank %}
                ### {{ block.settings.title }}
              {% endif %}
            

    {% endfor %}
  

	{% endif %}

{% schema %}
  {
    "name": "Orders",
	"class": "Body Section",
    "settings": [
		{
             "type": "text",
			 "id"  : "header",
			 "label": "Header"
		}
	],
	"blocks": [
		{
			"type": "section",
			"name": "Page Section",
			"settings": [
		{
          "type": "text",
          "id": "container_header",
          "label": "Container Header"
      	},
      	{
          "type": "richtext",
          "id": "container_text",
          "label": "Container Text"
      	}
			]
		}
	]
  }
{% endschema %}
2

Bump, if anyone has any ideas? I appreciate it.

Thank you!

3

bump. Did I explain this well enough?

Thank you

4

Is there a way to do this with render perhaps? I’m unsure on how render works

Thank you

5

Or in the page template can I have some javascript function, to have an event listener work like a toggle with an index to make other divs in separate sections show or hide?