Click to slide

Warning! Yellow and orange often indicates a warning that might need attention.  ... change or action. An Click to slide box is just a w3-container with a color. Click to slide If you want the ability to slide the alert message, add a element with an onclick attribute that says "when you click on me, hide my parent element.

<!-- script link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
script code
<!-- script code -->
<script>$(document).ready(function(){$("#flip").click(function(){$("#panel").slideToggle("slow");});});</script>

<!-- CSS code -->
<style>
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #d5d5d5;
    border: solid 1px #868686;
    border-radius:20px;
}

#panel {
    padding: 20px;
    display: none;
}
</style> 

<!-- HTML code -->
<div id="flip" style="background:white;">Click to slide</div>
<div id="panel">
add your own text that you want to show when click on the button .
</div>

Full HTML Code

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
<title>CoddingFix</title>
<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>
</head>
<style>
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #d5d5d5;
    border: solid 1px #868686;
    border-radius:20px;
}

#panel {
    padding: 20px;
    display: none;
}
</style>
<body>
<div id="flip" style="background:white;">Click to slide</div>
<div id="panel">
 add your own text that you want to show when click on the button
</div>
</body>
</html>


Image Result:

Related Post: