Q:

HTML Detail tag height adjustment based on open/close attribute

I have details tag which css height i want to adjust through javascript/jquery.  if the details tag has open attribute then height will be 200 else it will be 40 but i am unable to do this. 
 $jq("#ProjectQuestionAnswerBottomPanel").click(function(){

           console.log("change occur");
            if($jq("#ProjectQuestionAnswerBottomPanel").attr("open")){
                console.log("open found");
                $jq("#ProjectQuestionAnswerBottomPanel").css("height","");
                $jq("#ProjectQuestionAnswerBottomPanel").css("height","200px");
            }else{
                console.log("open found");
                $jq("#ProjectQuestionAnswerBottomPanel").css("height","");
                $jq("#ProjectQuestionAnswerBottomPanel").css("height","40px");
            }
        });

while my details html is
<details class="bottom-panel" id="ProjectQuestionAnswerBottomPanel" style="position: fixed;
        bottom: 80px;
        right: 0px;
        background: rgb(244, 238, 238);
        padding-left:5px;
        color: rgb(180, 17, 17);
        overflow: scroll;
        height: 40px;
        ">
    <div id="ProjectQuestionAnswer">
    </div>
</details>

A:

I hope I don't have any misunderstanding of your question. 
You can change the height by using the css
HTML:
<details class="bottom-panel" id="ProjectQuestionAnswerBottomPanel">
    <div id="ProjectQuestionAnswer">
    <p>Answer Here.</p>
    <p>Answer Here.</p>
    <p>Answer Here.</p>
    </div>
</details>

CSS:
details[open]{
  height: 200px;
}

details{
  height: 40px;
}

jsfiddle here. 
Also, be careful that details tag is not supported at IE and Edge. 
http://caniuse.com/#search=details

