Gestion de contenu en "Jquery" sur une seul page

Bonjour,
Communauté d'alsa créations, je viens à vous, après m'être pris la tête pendant de nombreuses heures à tenter de trouver une solution adéquate à mon problème.

N'étant pas une flèche de Jquery, j'ai tenté plusieurs techniques, ayant toutes étaient soldées par un échec.

J'ai mis en place sur mon site, un menu en tabs pour gérer plusieurs sous liens, qui lorsqu'on clique dessus, affiche le contenu lié à ce bouton, tout en restant sur la même page.

En image :
http://img11.hostingpics.net/pics/212160imageexplication1.jpg

Mon code :

            <ul class="mytabs" id="tabs">
                <li class="current"><a href="./tabs/tab-1.html">AVANT LE DÉPART</a></li>
                <li><a href="./tabs/tab-2.html">SUR PLACE</a></li>
                <li><a href="./tabs/tab-2.html">EN VAN</a></li>
            </ul>
            <div class="mytabs-container" id="tabs-container">
                    Chargement en cour...
            </div>

La page qu'il appel "tabs-1.html" :

<ul>
        <li><a id="check" href="#"></a></li>
        <li><a id="visa" href="#"></a></li>
        <li><a id="billet" href="#"></a></li>
        <li><a id="permis" href="#"></a></li>
        <li><a id="assurance" href="#"></a></li>
        <li><a id="courrier" href="#"></a></li>
        <li><a id="logement" href="#"></a></li>
        <li><a id="sante" href="#"></a></li>
        <li><a id="argent" href="#"></a></li>
        <li><a id="sac" href="#"></a></li>
    </ul>

Et le Jquery :

var containerId = '#tabs-container';
var tabsId = '#tabs';

$(document).ready(function(){
	// Preload tab on page load
	if($(tabsId + ' LI.current A').length > 0){
		loadTab($(tabsId + ' LI.current A'));
	}
	
    $(tabsId + ' A').click(function(){
    	if($(this).parent().hasClass('current')){ return false; }
    	
    	$(tabsId + ' LI.current').removeClass('current');
    	$(this).parent().addClass('current');
    	
    	loadTab($(this));    	
        return false;
    });
});

function loadTab(tabObj){
    if(!tabObj || !tabObj.length){ return; }
    $(containerId).addClass('loading');
    
    $(containerId).load(tabObj.attr('href'), function(){
        $(containerId).removeClass('loading');
    });
}

Le problème :
Voila pour le contexte, maintenant voila mon problème je n'arrive pas à faire apparaître mon contenu lorsque je clique sur un de mes icons. J'ai tenté de mettre un toggle, pour que lorsque je clique sur un de mes icons ça fasse apparaître ma <div> qui contient mes infos, mais ça n'a pas marché, pareil pour de l'ancrage avec un overflow sur ma div de contenu, ça à lamentablement échoué.

Si quelqu'un pourrait m'aiguiller vers quel chemin m'orienter, car je suis un peu perdu.

Exemple: d'effet à peu pres que j'aimerai réalisé www.css3create.com/Navigation-slide-CSS3-avec-target-et-transitions


J'espere avoir été clair dans ma demande. En espérant que quelqu'un est une idée pour m'aider.

Merci par avance
Modifié par cesium (05 Oct 2013 - 21:46)