Come posso espandere e comprimere un <div> utilizzando javascript?

96

Ho creato un elenco sul mio sito. Questo elenco viene creato da un ciclo foreach che si basa sulle informazioni dal mio database. Ogni elemento è un contenitore con diverse sezioni, quindi questo non è un elenco come 1, 2, 3 ... ecc. Sto elencando sezioni ripetute con informazioni. In ogni sezione c'è una sottosezione. La build generale è la seguente:

<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>

Quindi, sto cercando di chiamare una funzione con onclick = "majorpointsexpand ($ (this) .find ('legend'). InnerHTML)"

Il div che sto cercando di manipolare è style = "display: none" per impostazione predefinita e desidero utilizzare javascript per renderlo visibile al clic.

"$ (This) .find ('legend'). InnerHTML" sta tentando di passare, in questo caso, "Expand" come argomento nella funzione.

Ecco il 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";
            }
    }

Sono quasi sicuro al 100% che il mio problema sia la sintassi e non ho molta padronanza di come funziona javascript.

Ho jQuery collegato al documento con:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Nella <head></head>sezione.

javascript jquery

— Ryan Mortensen
fonte

2

Penso che quello che stai cercando di ottenere sia una fisarmonica jqueryui.com/accordion

— Marc

1

$ questo sono io che cerco di dire "in relazione a" l'elemento HTML all'interno del quale viene attivata la funzione.

— Ryan Mortensen

1

@hungerpain - Penso che il richiedente potrebbe essere nuovo su jQuery e ha appena dimenticato la parentesi $(this). Spero che questo ti aiuti.

— jmort253

2

Penso che dovresti prima studiare di più su jQuery. Apparentemente non sai molto sulla differenza tra jQuery e JavaScript

— tom10271

1

@aokaddaoc avevi perfettamente ragione;)

— Ryan Mortensen

181

Ok, quindi hai due opzioni qui:

Usa la fisarmonica dell'interfaccia utente di jQuery: è carina, facile e veloce. Vedi maggiori informazioni qui
Oppure, se vuoi ancora farlo da solo, puoi rimuovere il fieldset(non è semanticamente giusto usarlo comunque) e creare una struttura da solo.

Ecco come lo fai. Crea una struttura HTML come questa:

<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>

Con questo CSS: (Questo serve a nascondere le .contentcose quando la pagina viene caricata.

.container .content {
    display: none;
    padding : 5px;
}

Quindi, utilizzando jQuery, scrivi un clickevento per l'intestazione.

$(".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";
        });
    });

});

Ecco una demo: http://jsfiddle.net/hungerpain/eK8X5/7/

— krishwader
fonte

9

+1 in quanto ciò risolverebbe il problema se ci fosse più di un elemento DIV sulla pagina. In altre parole, poiché stai mirando al contenuto all'interno dell'intestazione cliccata, questo scala bene.

— jmort253

2

Il fieldset non è imperativo. Mi sbarazzerò di esso e userò solo un bordo. Questo è eccellente perché seleziona il div da espandere rispetto all'intestazione su cui ho fatto clic, il che è importante perché potrei avere diversi numeri di elementi elencati a seconda delle impostazioni dell'utente e di altri fattori.

— Ryan Mortensen

1

@Unipartisandev guarda questo: jsfiddle.net/hungerpain/476Nq esempio completo :)

— krishwader

Apprezzo molto l'aiuto. Ci saranno altre parti del sito che senza dubbio avranno bisogno di usare una fisarmonica anche se questa cosa in particolare è più un esempio di visualizzazione tutto o niente. Ho ancora problemi. Il mio jQuery era obsoleto e non si caricava. È stato risolto, ma continuo a non farlo funzionare. Ci ho provato per un'ora buona, ci dormirò sopra. Forse domani mi colpirà.

— Ryan Mortensen

Meraviglioso, grazie. Risparmiato un sacco di tempo!

— Basil Musa

21

che ne dite di:

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>

Violino

In questo modo stai vincolando l'evento click alla .majorpointsclasse e non devi scriverlo ogni volta nell'HTML.

— raam86
fonte

Ciao raam86, farei un ulteriore passo avanti e farei un .find sul div usando una classe invece di un id. Se il richiedente ha diversi di questi fieldset sulla pagina, vorrà scegliere come target lo hider per quello relativo allo specifico fieldset su cui si è fatto clic. Spero che questo ti aiuti! :) Ad esempio, potresti usare .closest per ottenere un riferimento al div genitore, quindi utilizzare .find per individuare il div con class = "hider" invece.

— jmort253

1

So che sono le 3 del mattino;), ma ho appena notato che stai ancora utilizzando gli ID nel tuo jsFiddle. Ciò potrebbe comportare un comportamento indefinito poiché la specifica W3C afferma che ogni ID dovrebbe essere univoco. Se cambi lo spegnimento in una classe, questo sarà più immune da bug o comportamenti strani e inspiegabili in altri browser. Spero che questo ti aiuti!

— jmort253

dovrebbe effettivamente essere $ ('. majorpointslegend'). click (function () {$ (this) .parent (). find ('. hider'). toggle ();}); OPPURE quando si fa clic su un punto qualsiasi del fieldset, verrà compresso.

— Awatatah

7

Quindi, prima di tutto, il tuo Javascript non usa nemmeno jQuery. Ci sono un paio di modi per farlo. Per esempio:

Primo modo, utilizzando il togglemetodo jQuery :

<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/

Un altro modo è semplicemente usare il showmetodo jQuery :

<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/

Tuttavia, un terzo modo è usare il slideTogglemetodo di jQuery che consente alcuni effetti. Ad esempio, $('#showMe').slideToggle('slow');che mostrerà lentamente il div nascosto.

— Michael Hawkins
fonte

Supponiamo che abbia più di uno di questi elementi showMe sulla pagina? Ricorda, sta usando un ciclo for per creare un elenco di questi, quindi il targeting class = "showMe" interesserebbe solo la prima istanza di quell'elemento. Il mio suggerimento è di fare riferimento all'elemento showMe in relazione a quello cliccato. Allora questa sarebbe una buona soluzione. Spero che questo ti aiuti! :)

— jmort253

Giusto, ma sta usando il ciclo per costruire l'elenco in una serie di <li>elementi, non div. In ogni caso, potrebbe semplicemente usare l'ID dell'elemento per nasconderlo.

— Michael Hawkins

Stai pensando alle sottosezioni e dimentichi che ce ne saranno di più. Ogni sezione è popolata con elementi li in una sottosezione . "Questo elenco è creato da un ciclo foreach che si basa sulle informazioni dal mio database. Ogni elemento è un contenitore con sezioni diverse, quindi questo non è un elenco come 1, 2, 3 ... ecc. Sto elencando sezioni ripetute con informazioni . In ogni sezione, c'è una sottosezione. " in breve, ti ha mostrato solo una sezione, anche se ce ne saranno altre.

— jmort253

6

Potresti voler dare un'occhiata a questo semplice metodo Javascript da invocare quando fai clic su un link per far espandere o comprimere un pannello / div.

<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>

Puoi passare l'ID div e alternerà tra la visualizzazione "nessuno" o "blocco".

Fonte originale su snip2code - Come comprimere un div in html

— Mike Scattoni
fonte

6

Molti problemi qui

Ho impostato un violino che funziona per te: http://jsfiddle.net/w9kSU/

$('.majorpointslegend').click(function(){
    if($(this).text()=='Expand'){
        $('#mylist').show();
        $(this).text('Colapse');
    }else{
        $('#mylist').hide();
        $(this).text('Expand');
    }
});

— David Lin
fonte

3

prova 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");
            }
    }

— nmanandhan
fonte

3

Ecco il mio esempio di animazione di un elenco personale con espandere una descrizione.

<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&#8217;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>

Violino

— Intacto
fonte

3

Dai un'occhiata a toggle() jQuery funzione :

http://api.jquery.com/toggle/

Inoltre, la funzione innerHTML jQuery è .html().

— è questo amore
fonte

1

Ciao, benvenuto in Stack Overflow! Dovresti mostrare un esempio in modo che la risposta sia più completa. Se il collegamento dovesse interrompersi, la tua risposta sarebbe comunque utile ai futuri visitatori. In bocca al lupo! :)

— jmort253

Puoi modificare per aggiungere un esempio o aggiungerlo come commento. Grazie.

— JGallardo

2

Dato che hai jQuery sulla pagina, puoi rimuovere onclickquell'attributo e la majorpointsexpandfunzione. Aggiungi il seguente script in fondo alla pagina o, preferibilmente, a un file .js esterno:

$(function(){

  $('.majorpointslegend').click(function(){
    $(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' );
  });

});

Questa soluzione dovrebbe funzionare con il tuo HTML così com'è, ma non è davvero una risposta molto robusta. Se cambi il fieldsetlayout, potresti romperlo. Suggerirei di inserire un classattributo in quel div nascosto, come class="majorpointsdetail"e utilizzare invece questo codice:

$(function(){

  $('.majorpoints').on('click', '.majorpointslegend', function(event){
    $(event.currentTarget).find('.majorpointsdetail').toggle();
    $(this).text( $(this).is(':visible')?'Collapse':'Expand' );
  });

});

Obs: non ci sono </fieldset>tag di chiusura nella tua domanda, quindi presumo che il div nascosto sia all'interno del fieldset.

— sergiopereira
fonte

Hai ragione. C'è un fieldset di chiusura, ma mi è sfuggito nella mia domanda. Viene subito dopo l'interno di chiusura </div> e prima dell'esterno di chiusura </div>

— Ryan Mortensen

1

Se hai utilizzato il data-role pieghevole ad es

    <div id="selector" data-role="collapsible" data-collapsed="true">
    html......
    </div>

quindi chiuderà il div espanso

    $("#selector").collapsible().collapsible("collapse");

— Atif Hussain
fonte

1

Dai un'occhiata alla libreria Readmore.js di Jed Foster .

Il suo utilizzo è semplice come:

$(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>

Espandi lo snippet

Ecco le opzioni disponibili per configurare il tuo 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() {}
},

Espandi lo snippet

Usa può usarlo come:

$('article').readmore({
  collapsedHeight: 100,
  moreLink: '<a href="#" class="you-can-also-add-classes-here">Continue reading...</a>',
});

Espandi lo snippet

Spero possa essere d'aiuto.

— Heitor Althmann
fonte