Переключить высоту контейнера Div

Question

Я работаю над кнопкой, на которой применяется переключатель, и высота div увеличивается и уменьшается. Итак, что я пытаюсь сделать, так это то, что на кнопке можно сказать, что на #about нажмите #aboutsubmenu показов, а высота #maincontainer увеличивается и на том же клике, если, если он открыт, он закрывается. Вот что я пытаюсь сделать

$(document).ready(function() { 
    $('#aboutsubmenu').hide(); 
    var opened; 
    var opened2; 
    $('#about').click(function() { 
     opened = "no"; 
     if (opened == "no") { 
      $('#aboutsubmenu').show(); 
      $('#maincontainer').css('height', '387px'); 
      opened = "yes"; 
     } 
     else if (opened == "yes") { 

     } 
    }); 
}); 

Я совершенно запутался здесь. Можете ли вы мне помочь.

Answer 1

Попробуйте это, инициализировать переменную вне обработчика событий

var opened = "no"; // 
var opened2; 
$('#about').click(function() { 
    if (opened == "no") { 
     $('#aboutsubmenu').show(); 
     $('#maincontainer').css('height', '387px'); 
     opened = "yes"; 
    } else if (opened == "yes") { 
     $('#aboutsubmenu').hide(); 
     $('#maincontainer').css('height', '100px'); 
     opened = "no"; 
    } 
}); 

Answer 2

Попробуйте этот код:

$(document).ready(function() { 
    $('#aboutsubmenu').hide(); 
    var opened = false; 
    $('#about').click(function() { 
     $('#aboutsubmenu').toggle(); // Toggle visibility 
     $('#maincontainer').height(opened ? 387 : 100); 
     opened = !opened; 
    }); 
}); 

Что вы сделали неправильно:

opened = "no"; 

, что код в начале функции делает alwasy открытым.