ONLY CSS Link on the bottom of the page to show slide up div

Question

User1991482975 posted

Hi, i would love to create only CSS Link fixed and centered on the botton of my webpage and if i click on it , this link will slide up with a div containg a form.

When the div slide up the link must also slide with the div..

How to achive this?

Answer 1

User1400794712 posted

Hi grafic.web,

Do you mean that when you click the link, the link and div above will slide up? I think you can use slideToggle event of JQuery to implement it. I make a demo, please take it as a reference.

<div id="divForm">
    @using (Html.BeginForm())
    {
        <p>I'm a div containing a form</p>
    }
</div>

<a href="#">Show Div</a>

@section scripts{
    <script>
        $("a").click(function () {
            $("#divForm").slideToggle("slow");
        })
    </script>
}

How it works:

Best Regards,

Daisy

Answer 2

User1991482975 posted

Hi X.Daisy ,

thanks for your answer!!!

it is possible to achive this with only CSS?

Answer 3

User1400794712 posted

Hi grafic.web,

It's OK to just use CSS, but it needs accurate layout. I made a demo, you can take it as a reference.

@{ 
    Layout = null;
}
<style>
    * {
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Helvetica, Sans-serif;
        word-spacing: -2px;
    }

    h1 {
        font-size: 40px;
        font-weight: bold;
        color: #191919;
        -webkit-font-smoothing: antialiased;
    }


    .message {
        background: #181818;
        color: #FFF;
        ;
        top: 0;
        left: 0;
        width: 100%;
        height: 250px;
        padding: 20px;
        transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
        overflow: hidden;
        box-sizing: border-box;
    }

        .message h1 {
            color: #FFF;
        }

    #toggle {
        ;
        appearance: none;
        cursor: pointer;
        left: -100%;
        top: -100%;
    }

        #toggle + label {
            ;
            cursor: pointer;
            padding: 10px;
            background: #26ae90;
            width: 100px;
            border-radius: 3px;
            padding: 8px 10px;
            color: #FFF;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
            -webkit-font-smoothing: antialiased;
            cursor: pointer;
            margin: 20px 50px;
            transition: all 500ms ease;
        }

            #toggle + label:after {
                content: "Close"
            }

        #toggle:checked ~ .container {
            transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
            padding: 5em 3em;
            margin-top: 0px;
        }

    #toggle:checked ~ .message {
        top: -250px;
    }

    .container {
        margin-top: 250px;
    }

    #toggle:checked + label {
        background: #dd6149;
    }

        #toggle:checked + label:after {
            content: "Open";
                top:0;
        }
</style>


<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"></label>

<div class="container">
</div>

<div class="message">
    @using (Html.BeginForm())
    {
    <h1>You can hide this place.</h1>
    }
</div>

How it works:

 

Best Regards,

Daisy

Answer 4

User1991482975 posted

Hi X.Daisy,

thanks a lot!!!

I imagine that if i would love to show the div from the bottom of the page i need to put in 

.message

bottom : 0px;

right?

Thanks again

Answer 5

User1400794712 posted

Hi grafic.web,

You are right, but there also needs to modify some other style. I post the change here, please refer to it.

#toggle:checked + label {
    background: #dd6149; 
    /*Here*/
    bottom: 0px;
}

#toggle + label {
    /*Here*/
    bottom:250px;
}

#toggle:checked ~ .message {
    /*here*/
    bottom: -250px;
    /*Remove the top property.*/
}
.message {
    /*Here*/
    bottom: 0;
    /*Remove the top property.*/
}

Then it works like:

Best Regards,

Daisy