how can i close my side bar after clicking <a> tag in shopify?

63 views Asked by At

These is codes that I used for HTML section I didn't use JavaScript in this section but there is CSS that I didn't add , I hope that you can help us to solve this issue

<div class="section--divider">
<div class="sideBar_container">

  <input type="checkbox" class="menu_btn" id="menu_toggle">

    <label for="menu_toggle"  class="menu_icon">
 
      <h4 class="video-coll">Videos Collection</h4>

          <span class="menu"></span>

    </label>

  <div class="sideBar_overlay" id="sideBar_overlay">

    <div class="sideBar" id="sideBar">

      <h4 class="sideBar_title">{{section.settings.title}}</h4>

      <input type="checkbox" class="menu_btn" id="menu_toggle" checked>

          <label for="menu_toggle"  class="inside_menu_icon menu_icon">

                <span class="menu inside_menu"></span>

          </label>
      <div class="sideBar_inner">

        <div class="top_menu">

           <ul>
           
                <div class="link_details">
                <li><a class="link_title" id="bastesho" href="#video_text_block_{{ forloop.index }}">{{ block.settings.title }}</a>
                </div>
           
           </ul>
        </div>
      </div>
    </div>
  </div>
</div>
  
<div class="page-width">
    <div class="section-header text-left">
      <h2>{{ section.settings.title }}</h2>
    </div>
  <div class="">
    <div class="index-section" id="video_text_block_{{ forloop.index }}">
  <div class="page-width feature-row-wrapper">
    
       
    <div class="feature-row__item" style="max-width: 530px" data-aos>
            <div>
                <div class="image-wrap" style="height: 0; padding-bottom:56.623%">
                    
                      <iframe src="//www.youtube.com/embed/_9VUPq3SxOc?vq=720" width="530" height="300" frameborder="0" allowfullscreen></iframe>
                   
                      
                        <iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?vq=720" width="530" height="300" frameborder="0" allowfullscreen></iframe>
                  
                     
                        <iframe src="//player.vimeo.com/video/{{ block.settings.video_url.id }}?color={{ settings.color_button | remove: "#" }}&byline=0&portrait=0&badge=0" width="530" height="300" frameborder="0" allowfullscreen></iframe>
                 
                </div>
            </div>
      </div>
    
    <div class="feature-row">
    
      <div class="feature-row__item feature-row__text feature-row__text--{{ block.settings.layout }} text-{{ block.settings.align_text }}" data-aos>
        
          <div class="subheading appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.subtitle }}</div>
      
       
          <div class="h1 appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.title | escape }}</div>

          <div class="rte appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.text }}</div>

          <div class="appear-delay{% cycle '','-1','-2','-3','-4' %}">
            <a href="{{ block.settings.button_link }}" class="btn{% if block.settings.button_style == 'secondary' %} btn--tertiary{% endif %}">
              {{ block.settings.button_label }}
            </a>
          </div>
      </div>

        {{ video_layout }}

    </div>
  </div>

</div>
  </div>
</div>

I didn't use JavaScript in this section but there is CSS that I didn't add , I hope that you can help us to solve this issue

i want to close sidebar after clicking tag (link) on mobile view

0

There are 0 answers