Bonjour à tous !
Je travaille actuellement sur un projet pour lequel j'ai été amené à utiliser du Javascript, ou plus précisément du jQuery. Etant très peu familier avec ce langage, je me permet de solliciter votre aide, car j'ai peut-être fait une erreur toute bête.
Voici donc le code jQuery sur lequel je travail :
Voici maintenant la partie du code HTML auquel il se rapporte :
Et pour terminer, les quelques lignes de CSS associées :
Vous l'aurez sans doute compris, je cherche à afficher/masquer du contenu stocké dans une div, à l'aide de liens situés dans une autre div. Je pourrai apporter des précisions ou fournir les fichiers source si besoin.
Merci d'avance si vous avez une idée !
Modifié par keden (22 Jun 2011 - 04:41)
Je travaille actuellement sur un projet pour lequel j'ai été amené à utiliser du Javascript, ou plus précisément du jQuery. Etant très peu familier avec ce langage, je me permet de solliciter votre aide, car j'ai peut-être fait une erreur toute bête.
Voici donc le code jQuery sur lequel je travail :
$(document).ready(function(){
$('#links p a.aff').click(function() {
var ref = $('div.aff', this);
$("li.on").tp_close();
ref.tp_open();
return false;
});
$('#links p a.fis').click(function() {
var ref = $('div.fis', this);;
$("li.on").tp_close();
ref.tp_open();
return false;
});
});
$.fn.tp_open = function() {
return this.each(function(){
$(this).removeClass("off");
$(this).addClass("on");
$('div.more', this).show(function(){
$(this).fadeIn(function() {
//
});
});
});
}
$.fn.tp_close = function() {
return this.each(function(){
var s = $(this);
$('div.more', s).fadeOut(function() {
$('div.more', s).hide();
s.removeClass("on");
s.addClass("off");
});
});
}Voici maintenant la partie du code HTML auquel il se rapporte :
<div id="links" class="story"><p><a href="#" class="aff">Lorem ipsum</a> • <a href="#" class="fis">Dolor sit amet</a></p></div>
</div></div>
<div class="colgroup colgroup2">
<div id="actGallery" class="story storyActivites">
<div class="aff"><li class="on"><div class="more">
<h2>Lorem ipsum</h2>
<p>Quisque a nibh sed dui auctor aliquet sed eu dolor. Maecenas porttitor libero ut metus imperdiet sed accumsan nisl posuere.</p>
</div></li></div>
<div class="fis"><li class="off"><div class="more">
<h2>Dolor sit amet</h2>
<p>In tincidunt sem et mi facilisis ac mattis magna varius. Vestibulum ultricies vestibulum mauris, nec venenatis ipsum varius aliquet. Aliquam nisi massa, posuere at scelerisque rhoncus, eget est :</p>
</div></li></div>
</div>
</div>Et pour terminer, les quelques lignes de CSS associées :
#actGallery div.more { overflow: hidden; visibility: hidden; position: relative; }
#actGallery li.on div.more { visibility: visible; }
#actGallery li.off div.more { width: 0; height: 0; }Vous l'aurez sans doute compris, je cherche à afficher/masquer du contenu stocké dans une div, à l'aide de liens situés dans une autre div. Je pourrai apporter des précisions ou fournir les fichiers source si besoin.
Merci d'avance si vous avez une idée !
Modifié par keden (22 Jun 2011 - 04:41)
