Using a Nav to display certain sections

Mako3
New Member
11 0 0

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: 

  <div id='sticky-anchor'>
    <div id='sticky'>
          <p class="quickNav">{{ section.settings.header }}</p>
      <p id="test"></p>
      <hr>
    {% for block in section.blocks %}
            
              <a id="pageLink" onclick="showHelp({{ forloop.index }})" href={{block.settings.sectionPageLink}}>
                {{ block.settings.button }}
      			<i id="navArrow{{ forloop.index }}" class="fad fa-chevron-right navArrow" style="float: right"></i>
              </a>

    {% endfor %}

			<div class='helpSupportContainer'>
                <span class='helpIcon'><i class="far fa-envelope fa-3x"></i></span>
              <h3 class='helpTitle'><a href="mailto:service@thehydrojug.com">Email</a></h3>
              <p>For larger issues please email us <a href="mailto:service@thehydrojug.com">HERE</a></p>
            </div>
      </div>
  </div>

 

Section code: 

    {% if section.settings.header != '' %}
<div id='body'>
  <div id='helpContainer'>
    <h1 class="sectionHeader">{{ section.settings.header }}</h1>
    <hr style="height: 5px; background-color: #000; margin: 12px 21px 12px 180px;">
    
    {% for block in section.blocks %}
            <div class='tile largeTile borderLabel'>
              <label>{{ block.settings.container_header }}</label>
            <p>{{ block.settings.container_text }}</p>

              {% if block.settings.title != blank %}
                <h3 class='tileTitle' style="margin-top: 10px;">{{ block.settings.title }}</h3>
              {% endif %}
            </div>

    {% endfor %}
  </div>
</div>
	{% 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 %}
Replies 4 (4)

Mako3
New Member
11 0 0

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

 

Thank you!

Mako3
New Member
11 0 0

bump. Did I explain this well enough?

 

Thank you

Mako3
New Member
11 0 0

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

 

Thank you

Mako3
New Member
11 0 0

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?