Jump to content

Change Height of Section on click with JQUERY

Recommended Posts

Site URL: https://www.night-manifesto.com/

PASSWORD : manifesto

 

Hello, 

I have created a section with tabs - and a button so that when i click on it i display only one of the blocks of the section that is an embedded video player and this part works fine. 

Now what i'd like to do is to have medium sized section and when i click on the button the section would change its height to small so that it would match the video player's eight. And this for mobile too. 

So i've written this line of code to inject CSS with JQUERY  

      $(aboutTabButton).click(function(){
		$("#60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’}) ;
      });

 it doesn't work 

i've tried this other line and it doesn't work either 

if ($( "#galleryTab" ).hasClass('active-tab')) {
	$("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’}); 
else {
    $("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘medium’}); 
}
    

 

I have tried numeric value for the height too and it didn't work either. 

 

Here is the entire script :

<script>
  $(function(){
    let galleryTab = '#block-d378e56b7083e4d48c24';
    let aboutTab = '#block-yui_3_17_2_1_1625405642353_6184';
    let contactTab = '#block-yui_3_17_2_1_1625405642353_6708';
    let codeTab = '#block-yui_3_17_2_1_1625406080854_3785';
    
    let galleryTabButton = '#gallery-tab';
    let aboutTabButton = '#about-tab';    
    let contactTabButton = '#contact-tab';
    
    /*Initiate the Tabs*/
    $(aboutTab).addClass('non-active-tab');
    $(galleryTab).addClass('active-tab');
    
    /*Add Actions to Each Button*/    
    $(galleryTabButton).click(function(){
      $(galleryTab).addClass('active-tab').removeClass('non-active-tab');
      $(aboutTab).add(contactTab).add(codeTab).addClass('non-active-tab').removeClass('active-tab');
    });

    $(aboutTabButton).click(function(){
      $(aboutTab).addClass('active-tab').removeClass('non-active-tab');
      $(galleryTab).add(contactTab).add(codeTab).addClass('non-active-tab').removeClass('active-tab');      
    });
/*		
      $(aboutTabButton).click(function(){
		$("#60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’ }) ;
      });

*/    
    $(contactTabButton).click(function(){
      $(contactTab).addClass('active-tab').removeClass('non-active-tab');
      $(aboutTab).add(galleryTab).addClass('non-active-tab').removeClass('active-tab');
    });

/*	
if ($( "#galleryTab" ).hasClass('active-tab')) {
	$("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’}); 
else {
    $("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘medium’}); 
}
*/    

  });
</script>

 

and i've also tried this in the CSS 

 

aboutTab.active-tab{

[data-section-id="60df82096aa9df24b6d23124"] {
	min-height: unset !important;
	;
}
@media screen and (max-width:767px) {
[data-section-id="abcxyz"] {
	min-height: unset !important;
	height: 250px !important;
}
}

 

THIS IS FOR THE SECTION CALLED CHAPTER ONE FOR NOW BUT IT WILL BE APPLIED TO ALL CHAPTERS. 

 

Link to comment
  • Replies 3
  • Views 726
  • Created
  • Last Reply

Hello, 

Unfortunately this didn't change anything at all - it feels like the ID of the section is not being take into account in the JQUERY code

      $(aboutTabButton).click(function(){
		$("#60ca1b5eefaefb2ac9e03f81").css({ "height": "small"}) ;
      });

 How can i indicate in a JQUERY script that i want to consider this specific section. 

 

Thanks

Link to comment
On 7/7/2021 at 6:36 PM, ArthurLacomblez said:

Hello, 

Unfortunately this didn't change anything at all - it feels like the ID of the section is not being take into account in the JQUERY code

      $(aboutTabButton).click(function(){
		$("#60ca1b5eefaefb2ac9e03f81").css({ "height": "small"}) ;
      });

 How can i indicate in a JQUERY script that i want to consider this specific section. 

 

Thanks

Which section you want to change? We will test it again

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.