Questuib

by Jdriele

HTML

<div class="question">
  <h3>Irez-vous à la piscine ce Week-end ?</h3>
  <ul class="navQuestion">
    <li class="choice navQuestion">Choix</li>
    <li class="description navQuestion">Description</li>
    <li class="result navQuestion">Résultats</li>
    <li class="share navQuestion">Partage</li>
  </ul>
  <br/>
  <div class="content">
    <div class="cChoice">
      <form>
        <input type="radio" name="q1" value="Oui" checked> Oui
        <br>
        <input type="radio" name="q1" value="Si"> Si...
        <br>
        <input type="radio" name="q1" value="Non"> Non
        <input type="radio" name="q1" value="Oui" checked> Oui
        <br>
        <input type="radio" name="q1" value="Si"> Si...
        <br>
        <input type="radio" name="q1" value="Non"> Non
        <input type="radio" name="q1" value="Oui" checked> Oui
        <br>
        <input type="radio" name="q1" value="Si"> Si...
        <br>
        <input type="radio" name="q1" value="Non"> Non
        <input type="radio" name="q1" value="Oui" checked> Oui
        <br>
        <input type="radio" name="q1" value="Si"> Si...
        <br>
        <input type="radio" name="q1" value="Non"> Non
        <input type="radio" name="q1" value="Oui" checked> Oui
        <br>
        <input type="radio" name="q1" value="Si"> Si...
        <br>
        <input type="radio" name="q1" value="Non"> Non
        <input type="radio" name="q1" value="Oui" checked> Oui
        <br>
        <input type="radio" name="q1" value="Si"> Si...
        <br>
        <input type="radio" name="q1" value="Non"> Non
      </form>
    </div>
    <div class="cDescription"><b>Description: </b>Une question politique d'actualité</div>
    <div class="cResult">Résultats</div>
    <div class="cShare">Share</div>
  </div>
</div>
<!-- Question -->

<div class="question">
  <h3>Aimez vous le Nutella ?</h3>

  <span class="choice">Choix</span>
  <span class="description">Description</span>
  <span class="result">Résultats</span>
  <span...

CSS

div.question {
   width: 400px;
   padding: 10px 10px 10px 10px;
   border: 5px solid gray;
   height: auto;
   margin: auto;
   margin-bottom: 10px;
   text-align: center
 }
 
 div.cChoice {
   padding-top: 10px;
   position: static;
   left: 100px;
   bottom: 90px;
   width: 300px;
   margin: auto;
   text-align: left;
 }
 
 div.cResult {
   padding-top: 10px;
   position: static;
   left: 100px;
   bottom: 90px;
   width: 300px;
   overflow: auto;
   margin: auto;
   text-align: left;
 }
 
 div.cDescription {
   padding-top: 10px;
   position: static;
   left: 100px;
   bottom: 90px;
   width: 300px;
   overflow: auto;
   margin: auto;
   text-align: left;
 }
 
 div.cShare {
   padding-top: 10px;
   position: static;
   left: 100px;
   bottom: 90px;
   width: 300px;
   overflow: auto;
   margin: auto;
   text-align: left;
 }
 
 ul.navQuestion {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
 li.navQuestion {
   display: inline;
 }
 
 li.navQuestion:hover {
   display: inline;
   color: #0000FF;
 }

JavaScript

$( document ).ready(function() {


$(".cDescription, .cChoice, .cResult, .cShare").hide()

$(".choice").click(function() {
  $(this).siblings(".cDescription").eq(0).hide()
  $(this).siblings(".cChoice").eq(0).toggle()
  $(this).siblings(".cResult").eq(0).hide()
  $(this).siblings(".cShare").eq(0).hide();
});



$(".description").click(function() {
  $(this).siblings(".cDescription").eq(0).toggle()
  $(this).siblings(".cChoice").eq(0).hide()
  $(this).siblings(".cResult").eq(0).hide()
  $(this).siblings(".cShare").eq(0).hide();
});

$(".result").click(function() {
  $(this).siblings(".cDescription").eq(0).hide()
  $(this).siblings(".cChoice").eq(0).hide()
  $(this).siblings(".cResult").eq(0).toggle()
  $(this).siblings(".cShare").eq(0).hide();
});

$(".share").click(function() {
  $(this).siblings(".cDescription").eq(0).hide()
  $(this).siblings(".cChoice").eq(0).hide()
  $(this).siblings(".cResult").eq(0).hide()
  $(this).siblings(".cShare").eq(0).toggle()
});

});