Jump to content

[Share] Click Button – Show Menu Block (Section)

Recommended Posts

Posted (edited)

Description: Clicking on each button >> Show corresponding menu section under.

Demo: https://tuanphan-demo01.squarespace.com/cbutton-smenu-block?noredirect

Pass: abc

image.thumb.png.255dfa29b86c6fc624afc8961c294b55.png

How to

If you can't make code work, you can comment below with link to page where you use code, I can check easier.

#1. Suppose you have 5 buttons with name: Menu 01, Menu 02, Menu 03, Menu 04, Menu 05

image.png.d55e48e18dd029d38f25b0ba0bd17cec.png

and URL: #menu01, #menu02, #menu03, #menu04, #menu05

Quote

Make sure “Open link in new tab” is disabled

image.png.82eab057ab9e457987e72acd7fdaf76c.png

image.png.514bbe47fdd3bd1cc22717d00aad4cb8.png

image.png.bd2eb812ffc3602d995fabe43863c599.png

image.png.51a5d874e375199a76369f30697ef24a.png

image.png.d24c55ce7c22c7729f50d0bddc0dd8bf.png

#2. Create 5 sections under and design the sections to what you want, here is my example (with 2 sections)

image.png.7d6dfc95fe60c46825d68cbee17e38fa.png

image.png.ddced7188b768bcd793a49d7451a9f4c.png

#3. After you have 5 buttons with 5 sections, next

You need to edit the first section (Menu 01 section) > Add a Code Block > Paste this code

<div class="cbsc show-section menu01-section"></div>

image.png.17a69d9b12fda3ff7952e1a50fe13cb7.png

Next, You need to edit 4 sections (Menu 02, Menu 03, Menu 04, Menu 05) > Add a Code Block > Paste this code

With Menu 02 section, use this code:

<div class="cbsc hide-section menu02-section"></div>

image.png.f09198fffdab96dc30ab1688100ad55e.png

With Menu 03 section, use this code:

<div class="cbsc hide-section menu03-section"></div>

image.png.309dc68d71fd4f94ba5827ffb76b7512.png

With Menu 04 section, use this code:

<div class="cbsc hide-section menu04-section"></div>

image.png.f4a9d471f6a7a4433bd4a7fb37767808.png

With Menu 05 section, use this code:

<div class="cbsc hide-section menu05-section"></div>

image.png.565510f3b885c2a1b60fa75427a0c2cd.png

#4. Use this code to Website Tools > Code Injection – Footer or Page Header Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // do not remove this code
$('section.page-section').each(function(){
    var layclass = $(this).find('.code-block .cbsc').attr('class');
    console.log(layclass);
    $(this).addClass(layclass);
});
  // menu01
  $('a[href="#menu01"]').click(function(){
      $('.menu01-section').addClass('show-section').removeClass('hide-section');
    $('section.cbsc:not(.menu01-section)').removeClass('show-section').addClass('hide-section');
    $(this).addClass('change-button-style');
    $('a:not([href="#menu01"])').removeClass('change-button-style');
  });
  // menu02
  $('a[href="#menu02"]').click(function(){
      $('.menu02-section').addClass('show-section').removeClass('hide-section');
    $('section.cbsc:not(.menu02-section)').removeClass('show-section').addClass('hide-section');  
     $(this).addClass('change-button-style');
    $('a:not([href="#menu02"])').removeClass('change-button-style');
  });
 // menu 03 
  $('a[href="#menu03"]').click(function(){
      $('.menu03-section').addClass('show-section').removeClass('hide-section');
    $('section.cbsc:not(.menu03-section)').removeClass('show-section').addClass('hide-section');  
      $(this).addClass('change-button-style');
    $('a:not([href="#menu03"])').removeClass('change-button-style');
  });
    // menu 04
    $('a[href="#menu04"]').click(function(){
      $('.menu04-section').addClass('show-section').removeClass('hide-section');
    $('section.cbsc:not(.menu04-section)').removeClass('show-section').addClass('hide-section');
        $(this).addClass('change-button-style');
    $('a:not([href="#menu04"])').removeClass('change-button-style');
  });
   // menu 05
   $('a[href="#menu05"]').click(function(){
      $('.menu05-section').addClass('show-section').removeClass('hide-section');
    $('section.cbsc:not(.menu05-section)').removeClass('show-section').addClass('hide-section');  
       $(this).addClass('change-button-style');
    $('a:not([href="#menu05"])').removeClass('change-button-style');
});
});
</script>
<style>
  section.page-section.hide-section {
      display: none !important;
  }
  section.page-section.show-section {
      display: block !important;
  }
  .change-button-style {
      background-color: green !important;
  }
</style>

image.png.9ca018208bc44c4d076e8fad120e08ad.png

#5. Explain code

image.png.d654c6c791fe5d36f179e7603f1dd305.png

image.png.5cb052a263fdde5b21cbacbe62ee61bd.png

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 0
  • Views 151
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.