jQuery simple pliable Div?
Je cherche le bon, simple, petit code pour faire les choses suivantes:
Cliquez sur L'élément avec la classe qui lui est appliquée.
-
DIV.Classe-qui se développe et affiche le contenu caché. (Slidedown-bascule)
-
DIV.Classe - qui s'effondre et cache le contenu précédemment affiché. (slideUp-bascule)
J'ai créé un jsFiddle ici: http://jsfiddle.net/Q4PUw/1/
Donc, pour être vague et facile, j'ai besoin de savoir comment pour obtenir une classe DIV pour devenir caché et visible une fois qu'un élément sur la même page a une classe qui lui est appliquée, dans lequel activerait et désactiverait le contenu HTML caché et ou VISIBLE. Et j'ai besoin qu'il soit caché par défaut.
J'ai regardé partout sur internet et j'ai seulement trouvé des scripts très complexes, mais rien de simple. J'ai trouvé Simple Accordians... Mais ceux qui ne ferment jamais, ils en ouvrent juste un autre.
Merci à tous pour l'AIDE et j'espère pouvoir répondre cette même question pour beaucoup d'autres personnes...
Note: je connais très peu JavaScript et ou même jQuery.
4 réponses
$('.expand-one').click(function(){
$('.content-one').slideToggle('slow');
});
Je regardais cela et je voulais un div pliable qui était déjà stylé pour moi. Puis j'ai réalisé que ce que je voulais était un seul volet jQuery-ui accordéon.
<div id="collapse">
<h3>Collapse and Expand</h3>
<div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
collapsible: true,
active: false
});
</script>
Je voulais le faire avec plusieurs divs, chacun avec son propre déclencheur. Construire sur la réponse D'AlienWebguy ci-dessus:
HTML
<div>
<p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
<p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
<p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
<p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
Javascript
$('.expand').click(function(){
target_num = $(this).attr('id').split('-')[1];
content_id = '#expandable-'.concat(target_num);
$(content_id).slideToggle('fast');
});
CSS
.expand {
font-weight: bold;
font-style: italic;
font-size: 12px;
cursor: pointer;
}
.expandable {
display:none;
}
div {
margin: 10px;
}
Mauvaise idée d'utiliser l'accordéon. Mieux est de créer votre propre bloc pliable.
Exemple:
function InitSpoilBlock(idClicked)
{
$(idClicked).on('click', function(e){
var textArray = ['blind','slide'];//here you can add other effects
var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];
$(e.target).parent().children(".HiderPanel").toggle(randomEffect);
});
}
Donc, quand vous écrivez un tel html:
<div class="HiderContainer">
<a href="#" class="Hider">More</a>
<div class="HiderPanel">
Spoiled block of html
</div>
</div>
Et après le chargement de la page, vous appelez
InitSpoilBlock('.Hider');
Tous les blocs seront possibles pour réduire et cacher avec une animation aléatoire. Ou vous pouvez utiliser une animation exacte aussi.