hide form with css3 and show default div.

Problem :

I only can use html5 and css3. I have a form and I need simulate "send form data". After click in submit button I need to hide the form and show some default div (#result). How can I do this (only css3 and html5, no javascript).

Thanks.

This is my HTML + CSS code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS CHALLENGE</title>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Raleway:400 "Raleway");
        @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
        .global {
            background-color: #353535;
            font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
        }

        .backgound {
            background-color: whitesmoke;
            height: 530px;
            width: 400px;
            margin:0 auto 0 auto;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
        }

        #loginForm {
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            font-family: Raleway;
            font-size: 20px;
            font-style: normal;
            font-variant: small-caps;
            font-weight: 200;
            line-height: 26.4px;
        }

		.header {
			margin-left: 40px;
        }

		#triangle {
			width: 0;
			height: 0;
			border-left: 12px solid transparent;
			border-right: 12px solid transparent;
			border-top: 12px solid cornflowerblue;
			margin-top: 29px;
			left: 54px;
			position: relative;
		}

		#loginForm h2 {
            background: cornflowerblue;
            color: white;
            height: 55px;
            font-size: 2.5em;
            padding-top: 10%;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            font-family: Raleway;
            font-size: 39px;
            font-style: normal;
            font-variant: small-caps;
            font-weight: 200;
            line-height: 26.4px;
        }

        .item {
            display: -webkit-box;
            height: 30px;
            width: 300px;
            margin: 0 auto 15px;
            background-color: white;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
        }

        #idMessage  {
            height: 160px;
        }

        #loginForm button{
            opacity: 0.5;
            transition:opacity .3s;
            -webkit-transition:opacity .3s;
            background-color: darkolivegreen;
            width: 308px;
            height: 60px;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            font-size: 2em;
        }

        #loginForm:valid button {
            opacity: 1;
        }

        #result {
            display: none;
        }

        #result:target {
            display:block;
        }

        .myLoad {
            position: relative;
        }

        .myLoad i {
            position: absolute;
            top: 8px;
            left: 325px;
        }

#val {
    display: none;
}
.#idEmail:invalid #val {
        display: block;
}

input:invalid .val {
    display: block;
}

#idEmail:invalid, #idMessage:invalid{
    color: red;
}

#idEmail:valid, #idMessage:valid{
    color: green;
}


/* fa-spin*/
    </style>
</head>
<body class="global">
<div class="backgound">
    <form id="loginForm" action="#result" method="get">
        <h2>
			<span class="header">Contact Us!</span>
			<div id="triangle"></div>
		</h2>
        <div class="myLoad">
            <input class="item" id="idEmail" type="email"
                placeholder="Email" required>
            <i id="inval" class="fa fa-refresh"></i>
            <i id="val" class="fa fa-refresh fa-spin"></i>
        </input>
        </div>
            <div class="myLoad">
            <input class="item" id="idSubject" type="text"
                placeholder="Subject">
            <i class="fa fa-refresh"></i>
        </div>
        <div class="myLoad">
            <textarea class="item" id="idMessage" placeholder="Message"
                rows="10" cols="40" required></textarea>
            <i class="fa fa-refresh"></i>
        </div>
        <button class="item" type="submit">Send</button>
    </form>
    <div id="result" class="sended">Form sended</div>
</div>
</body>
</html>

Solution :

I think you're on the right track using the :target pseudo-class. However, you need to switch the order of the result div and the form, and then combine it with a general sibling selector, see my example here.

(Using the button to submit the form doesnt quite seem to work, but I think that's because the iframing, hopefully it should work for you. Try clicking the test link on jsfiddle to navigate to #result.)

this tutorial help you. http://css-tricks.com/scrollfollow-sidebar/ or this one html <div id="header">HEADER</div> <div id="content"> <div id="left">LEFT</div> <div id="right">RIGHT</div> </div> <div id="footer">FOOTER</div> js $(function() { var $sidebar =...

How's this: https://jsfiddle.net/sp3rLang/4/ var justify = document.getElementById('v-justify'); var maxHeight = justify.parentElement.clientHeight; var fontSize = 1; while ( maxHeight > justify.clientHeight ) { justify.style.fontSize = fontSize++ + 'px'; } // the...

This is a sample which I have tried. try this. <head> <title>Search</title> <style> #searchcontrol { margin-LEFT:500PX; } </style> <script src="https://www.google.com/jsapi" type="text/javascript"></script> <script language="Javascript" type="text/javascript"> //<!...

How To Do Multiple Hover On List

This is the jquery I have used $('#a').hover(function(){ $('#a').css('background','#ccc'); $('#b').css('background','#ccc'); }, function(){ $('#a').css('background','#fff'); // Background of #a by default $('#b').css('background','#fff'); // Background of #b by default }) $('#b').hover(function(){...