Question

I am very new to web design, and specially to technologies like css3 and html5,
I want to built a website that will use as much as possible CSS3 and HTML5 and as less as possible JavaScript.

So I want to get pretty much the same behavior using only CSS/HTML.

$(document).ready(function () {
    $("#wrapper section").click(function() {
        var bcn = $(this).next('.box-content');
        if ($('.box-content').is(':visible')) {
            $('.box-content').hide();
            bcn.show();
        }
        else {
            $('.box-content').hide();
            bcn.slideToggle(200);
        }
    });
});

That’s what I want to make without JS: http://jsfiddle.net/8BLD7/7/

Answer 1

This is roughly approximate to the code you have there, obviously as others have stated this will only work in modern browsers—I wouldn’t recommend purely using this system—but it is something that can be worked in as a progressive enhancement as mentioned by War10ck.

http://jsfiddle.net/3VQ9X/

For futher information on how this works, and the issues to be aware of read these links:

• http://css-tricks.com/on-target/
• http://reference.sitepoint.com/css/pseudoclass-target
• http://blog.teamtreehouse.com/stay-on-target

Here’s the markup and css involved.

markup

<div id="wrapper">
  <nav>
    <h3><a href="#content-1">App 1</a><h3>
    <h3><a href="#content-2">App 2</a><h3>
  </nav>
  <section class="main">
    <section class="box-content" id="content-1">
      <p> This is content 1 </p>
    </section>
    <section class="box-content" id="content-2">
      <p> This is content 2 </p>
    </section>
  </section>
</div>

css (basic element setup, can be modified as you like)

nav {
  border: 1px solid black;
  float: left;
}

section.main {
  position: relative; /* this is important */
  overflow: hidden; /* as is this, but everthing else can be modified */
  float: left;
  border: 1px solid red;
  width: 500px; /* having fixed dimensions will make things easier */
  height: 500px;
}

css (the magic bit)

section.box-content {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 1.0s ease-in-out;
  -moz-transition: all 1.0s ease-in-out;
  -ms-transition: all 1.0s ease-in-out;
  -o-transition: all 1.0s ease-in-out;
  transition: all 1.0s ease-in-out;
  -webkit-transform: translate(0,-500px);
  -moz-transform: translate(0,-500px);
  -ms-transform: translate(0,-500px);
  -o-transform: translate(0,-500px);
  transform: translate(0,-500px);
}

/* the pseudo selector :target only comes into effect when
   an anchored link has been clicked that targets a specific
   element by id. If the element with the id has this pseudo
   selector applied, then the css will be applied. Tie this
   together with transformations, and you have interactive 
   dynamic css :) */

section.box-content:target {
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -ms-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
}