Mohammad Faizan Khan Mohammad Faizan Khan - 14 days ago 5
HTML Question

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>

Answer

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