Change Height of Section on click with JQUERY

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. 

Hi. The ' character on your code is invalid.

It should be

'height':'small'

or

"height":"small"

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

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