CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Muhammad Faizan Khan
Muhammad Faizan Khan

Reputation: 10561

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>

Upvotes: 2

Views: 514

Answers (2)

SaidbakR
SaidbakR

Reputation: 13544

This is the correct Jquery and HTML code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
  <script>
    $("#ProjectQuestionAnswerBottomPanel").click(function(){

           console.log("change occur");
            if(typeof $(this).attr("open") !== 'undefined'){
                console.log("open found");
                $(this).css("height","");
                $(this).css("height","200px");
            }else{
                console.log("open Not found");
                $(this).css("height","");
                $(this).css("height","40px");
            }
        });
  </script>
</body>
</html>

JSBIN

Upvotes: 0

Tim Cosmo
Tim Cosmo

Reputation: 66

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

Upvotes: 2

Related Questions