5

JQuery CSS .hide not complete

 2 years ago
source link: https://www.codesd.com/item/jquery-css-hide-not-complete.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

JQuery CSS .hide not complete

advertisements

I have a Dialog box that is in the bottom right, I am trying to use simple jQuery hide/show to minimize it. It works for the most part, but .x_container is not completely hiding. There is a 1px white line that is still there. What is wrong with my code?

function toggle_close() {
    $("#x_header").hide();
    $("#x_mainbody").hide();
    $("#x_footer").hide();
    $("#x_close").hide();
    $("#x_open").show();
}
function toggle_open() {
    $("#x_header").show();
    $("#x_mainbody").show();
    $("#x_footer").show();
    $("#x_close").show();
    $("#x_open").hide();
}

.x_screen {
        position: relative;
    }
    .x_container {
        position: fixed;
        bottom: 0;
        right: 20%;
        width: 250px;
        max-height: 600px;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        background-color: #ffffff;
    }
    .x_header {
        float: left;
        height: 20px;
        width: 210px;
        background-color: #ccc;
        border-bottom: 1px solid #000;
        padding: 5px;
    }
    .x_close {
        float: right;
        height: 20px;
        width: 20px;
        background-color: #ccc;
        border-bottom: 1px solid #000;
        padding: 5px;
    }
    .x_mainbody {
        margin-top: 0;
        width: 240px;
        min-height: 400px;
        max-height: 560px;
        overflow: auto;
        padding: 5px;
    }
    .x_footer {
        height: 20px;
        width: 240px;
        background-color: whiteSmoke;
        border-top: 1px solid #DDD;
        padding: 5px;
    }
    .x_screen2 {
        position: relative;
    }
    .x_container2 {
        position: fixed;
        bottom: 0;
        right: 20%;
        width: 20px;
    }
    .x_open {
        float: right;
        height: 20px;
        width: 20px;
        background-color: whiteSmoke;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        padding: 5px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x_screen">
    <div class="x_container">
        <div><div id="x_header" class="x_header">Header</div><div id="x_close" onclick="toggle_close()" class="x_close">[x]</div></div>
        <div id="x_mainbody" class="x_mainbody">
            <p>Body</p>
        </div>
        <div id="x_footer" class="x_footer">Footer</div>
    </div>
</div>
<div class="x_screen2">
    <div class="x_container2">
        <div id="x_open" onclick="toggle_open()" class="x_open" style="display:none;">[*]</div>
    </div>
</div>

The problem.. is you haven't hidden .x_container class yet.

and you don't need to hide all elements inside of container if your intention is only to minimize. It's working only with hiding x_container.

    function toggle_close() {
        // $("#x_header").hide();
        // $("#x_mainbody").hide();
        // $("#x_footer").hide();
        // $("#x_close").hide();
        $(".x_container").hide();
        $("#x_open").show();
    }
    function toggle_open() {
        $(".x_container").show();
        // $("#x_header").show();
        // $("#x_mainbody").show();
        // $("#x_footer").show();
        // $("#x_close").show();
        $("#x_open").hide();
    }

    .x_screen {
        position: relative;
    }
    .x_container {
        position: fixed;
        bottom: 0;
        right: 20%;
        width: 250px;
        max-height: 600px;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        background-color: #ffffff;
    }
    .x_header {
        float: left;
        height: 20px;
        width: 210px;
        background-color: #ccc;
        border-bottom: 1px solid #000;
        padding: 5px;
    }
    .x_close {
        float: right;
        height: 20px;
        width: 20px;
        background-color: #ccc;
        border-bottom: 1px solid #000;
        padding: 5px;
    }
    .x_mainbody {
        margin-top: 0;
        width: 240px;
        min-height: 400px;
        max-height: 560px;
        overflow: auto;
        padding: 5px;
    }
    .x_footer {
        height: 20px;
        width: 240px;
        background-color: whiteSmoke;
        border-top: 1px solid #DDD;
        padding: 5px;
    }
</style>
<style type="text/css">
    .x_screen2 {
        position: relative;
    }
    .x_container2 {
        position: fixed;
        bottom: 0;
        right: 20%;
        width: 20px;
    }
    .x_open {
        float: right;
        height: 20px;
        width: 20px;
        background-color: whiteSmoke;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        padding: 5px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x_screen">
    <div class="x_container">
        <div><div id="x_header" class="x_header">Header</div><div id="x_close" onclick="toggle_close()" class="x_close">[x]</div></div>
        <div id="x_mainbody" class="x_mainbody">
            <p>Body</p>
        </div>
        <div id="x_footer" class="x_footer">Footer</div>
    </div>
</div>
<div class="x_screen2">
    <div class="x_container2">
        <div id="x_open" onclick="toggle_open()" class="x_open" style="display:none;">[*]</div>
    </div>
</div>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK