Comment puis-je développer et réduire un <div> en utilisant javascript?
J'ai créé une liste sur mon site. Cette liste est créée par une boucle foreach qui se construit avec les informations de ma base de données. Chaque article est un conteneur avec différentes sections, donc ce n'est pas une liste comme 1, 2, 3 ... etc. Je liste les sections répétées avec des informations. Dans chaque section, il y a une sous-section. La construction générale est la suivante:
<div>
<fieldset class="majorpoints" onclick="majorpointsexpand($(this).find('legend').innerHTML)">
<legend class="majorpointslegend">Expand</legend>
<div style="display:none" >
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
Donc, j'essaie d'appeler une fonction avec onclick = "majorpointsexpand ($ (this) .find ('legend'). InnerHTML)"
Le div que j'essaie de manipuler est style = "display: none" par défaut et je veux utiliser javascript pour le rendre visible au clic.
Le "$ (this) .find ('légende"). InnerHTML "tente de passer, dans ce cas," Expand "en tant qu'argument dans la fonction.
Voici le javascript:
function majorpointsexpand(expand)
{
if (expand == "Expand")
{
document.write.$(this).find('div').style = "display:inherit";
document.write.$(this).find('legend').innerHTML = "Collapse";
}
else
{
document.write.$(this).find('div').style = "display:none";
document.write.$(this).find('legend').innerHTML = "Expand";
}
}
Je suis presque sûr à 100% que mon problème est lié à la syntaxe et je ne comprends pas très bien comment fonctionne le javascript.
JQuery est lié au document avec:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Dans la section <head></head>.
Ok, donc vous avez deux options ici:
- Utilisez l'accordéon de jQuery UI - c'est agréable, facile et rapide. Voir plus d'infos ici
- Ou, si vous voulez toujours le faire vous-même, vous pouvez supprimer la
fieldset(ce n’est pas du droit de l’utiliser de toute façon) et créer une structure par vous-même.
Voici comment vous faites ça. Créez une structure HTML comme ceci:
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
Avec ce CSS: (Ceci est pour cacher le truc .content quand la page se charge.
.container .content {
display: none;
padding : 5px;
}
Ensuite, en utilisant jQuery, écrivez un événement click pour l’en-tête.
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Voici une démo: http://jsfiddle.net/hungerpain/eK8X5/7/
que diriez-vous:
jQuery:
$('.majorpoints').click(function(){
$(this).find('.hider').toggle();
});
HTML
<div>
<fieldset class="majorpoints">
<legend class="majorpointslegend">Expand</legend>
<div class="hider" style="display:none" >
<ul>
<li>cccc</li>
<li></li>
</ul>
</div>
</div>
Fiddle
De cette façon, vous liez l’événement click à la classe .majorpoints sans avoir à l’écrire au format HTML à chaque fois.
Beaucoup de problèmes ici
J'ai mis en place un violon qui fonctionne pour vous: http://jsfiddle.net/w9kSU/
$('.majorpointslegend').click(function(){
if($(this).text()=='Expand'){
$('#mylist').show();
$(this).text('Colapse');
}else{
$('#mylist').hide();
$(this).text('Expand');
}
});
Donc, tout d’abord, votre Javascript n’utilise même pas jQuery. Il y a plusieurs façons de le faire. Par exemple:
Première façon, en utilisant la méthode jQuery toggle:
<div class="expandContent">
<a href="#">Click Here to Display More Content</a>
</div>
<div class="showMe" style="display:none">
This content was hidden, but now shows up
</div>
<script>
$('.expandContent').click(function(){
$('.showMe').toggle();
});
</script>
jsFiddle: http://jsfiddle.net/pM3DF/
Une autre méthode consiste simplement à utiliser la méthode jQuery show:
<div class="expandContent">
<a href="#">Click Here to Display More Content</a>
</div>
<div class="showMe" style="display:none">
This content was hidden, but now shows up
</div>
<script>
$('.expandContent').click(function(){
$('.showMe').show();
});
</script>
jsFiddle: http://jsfiddle.net/Q2wfM/
Une troisième méthode consiste à utiliser la méthode slideToggle de jQuery qui permet certains effets. Tels que $('#showMe').slideToggle('slow'); qui affichera lentement le div caché.
Vous voudrez peut-être jeter un coup d'œil à cette méthode JavaScript simple à invoquer lorsque vous cliquez sur un lien pour faire un panneau/div développer ou réduire.
<script language="javascript">
function toggle(elementId) {
var ele = document.getElementById(elementId);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
Vous pouvez passer l'ID div et il va basculer entre l'affichage «aucun» et «bloquer».
Source originale sur snip2code - Comment réduire un div en html
Voici mon exemple d'animation une liste du personnel avec une description élargir.
<html>
<head>
<style>
.staff { margin:10px 0;}
.staff-block{ float: left; width:48%; padding-left: 10px; padding-bottom: 10px;}
.staff-title{ font-family: Verdana, Tahoma, Arial, Serif; background-color: #1162c5; color: white; padding:4px; border: solid 1px #2e3d7a; border-top-left-radius:3px; border-top-right-radius: 6px; font-weight: bold;}
.staff-name { font-family: Myriad Web Pro; font-size: 11pt; line-height:30px; padding: 0 10px;}
.staff-name:hover { background-color: silver !important; cursor: pointer;}
.staff-section { display:inline-block; padding-left: 10px;}
.staff-desc { font-family: Myriad Web Pro; height: 0px; padding: 3px; overflow:hidden; background-color:#def; display: block; border: solid 1px silver;}
.staff-desc p { text-align: justify; margin-top: 5px;}
.staff-desc img { margin: 5px 10px 5px 5px; float:left; height: 185px; }
</style>
</head>
<body>
<!-- START STAFF SECTION -->
<div class="staff">
<div class="staff-block">
<div class="staff-title">Staff</div>
<div class="staff-section">
<div class="staff-name">Maria Beavis</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Maria earned a Bachelor of Commerce degree from McGill University in 2006 with concentrations in Finance and International Business. She has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007.</p>
</div>
<div class="staff-name">Diana Smitt</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Diana joined the Diana Smitt Group to help contribute to its ongoing commitment to provide superior investement advice and exceptional service. She has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses.</p>
</div>
<div class="staff-name">Mike Ford</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Mike: A graduate of École des hautes études commerciales (HEC Montreal), Guillaume holds the Chartered Investment Management designation (CIM). After having been active in the financial services industry for 4 years at a leading competitor he joined the Mike Ford Group.</p>
</div>
</div>
</div>
<div class="staff-block">
<div class="staff-title">Technical Advisors</div>
<div class="staff-section">
<div class="staff-name">TA Elvira Bett</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Elvira has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007. Laura works directly with Caroline Hild, aiding in revising client portfolios, maintaining investment objectives, and executing client trades.</p>
</div>
<div class="staff-name">TA Sonya Rosman</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Sonya has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses through the Canadian Securities Institute. She recently completed her Wealth Management Essentials course and became an Investment Associate.</p>
</div>
<div class="staff-name">TA Tim Herson</div>
<div class="staff-desc">
<p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Tim joined his father’s group in order to continue advising affluent families in Quebec. He is currently President of the Mike Ford Professionals Association and a member of various other organisations.</p>
</div>
</div>
</div>
</div>
<!-- STOP STAFF SECTION -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript"><!--
//<![CDATA[
$('.staff-name').hover(function() {
$(this).toggleClass('hover');
});
var lastItem;
$('.staff-name').click(function(currentItem) {
var currentItem = $(this);
if ($(this).next().height() == 0) {
$(lastItem).css({'font-weight':'normal'});
$(lastItem).next().animate({height: '0px'},400,'swing');
$(this).css({'font-weight':'bold'});
$(this).next().animate({height: '300px',opacity: 1},400,'swing');
} else {
$(this).css({'font-weight':'normal'});
$(this).next().animate({height: '0px',opacity: 1},400,'swing');
}
lastItem = $(this);
});
//]]>
--></script>
</body></html>
Examinez la fonction toggle()jQuery:
De plus, innerHTMLjQuery Function est .html().
essayez jquery,
<div>
<a href="#" class="majorpoints" onclick="majorpointsexpand(" + $('.majorpointslegend').html() + ")"/>
<legend class="majorpointslegend">Expand</legend>
<div id="data" style="display:none" >
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
function majorpointsexpand(expand)
{
if (expand == "Expand")
{
$('#data').css("display","inherit");
$(".majorpointslegend").html("Collapse");
}
else
{
$('#data').css("display","none");
$(".majorpointslegend").html("Expand");
}
}
Puisque vous avez jQuery sur la page, vous pouvez supprimer cet attribut onclick et la fonction majorpointsexpand. Ajoutez le script suivant au bas de votre page ou, de préférence, dans un fichier .js externe:
$(function(){
$('.majorpointslegend').click(function(){
$(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
Cette solution devrait fonctionner avec votre code HTML tel quel, mais ce n'est pas vraiment une réponse très robuste. Si vous modifiez votre mise en page fieldset, vous risquez de la casser. Je suggérerais que vous mettiez un attribut class dans cette div cachée, comme class="majorpointsdetail" et utiliseriez ce code à la place:
$(function(){
$('.majorpoints').on('click', '.majorpointslegend', function(event){
$(event.currentTarget).find('.majorpointsdetail').toggle();
$(this).text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
Obs: il n'y a pas de balise de fermeture </fieldset> dans votre question, donc je suppose que la div cachée est à l'intérieur du champs.
Si vous avez utilisé le rôle de données repliable, par ex.
<div id="selector" data-role="collapsible" data-collapsed="true">
html......
</div>
alors il va fermer la div élargie
$("#selector").collapsible().collapsible("collapse");
Découvrez la bibliothèque Readmore.js de Jed Foster.
Son utilisation est aussi simple que:
$(document).ready(function() {
$('article').readmore({collapsedHeight: 100});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js" type="text/javascript"></script>
<article>
<p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and Explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p>
<p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
<p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p>
<p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
</article>Voici les options disponibles pour configurer votre widget:
{
speed: 100,
collapsedHeight: 200,
heightMargin: 16,
moreLink: '<a href="#">Read More</a>',
lessLink: '<a href="#">Close</a>',
embedCSS: true,
blockCSS: 'display: block; width: 100%;',
startOpen: false,
// callbacks
blockProcessed: function() {},
beforeToggle: function() {},
afterToggle: function() {}
},Utilisez peut l'utiliser comme:
$('article').readmore({
collapsedHeight: 100,
moreLink: '<a href="#" class="you-can-also-add-classes-here">Continue reading...</a>',
});J'espère que ça aide.