Afficher / masquer 'div' en utilisant JavaScript

194

Pour un site Web que je suis en train de faire, je veux charger un div, et en masquer un autre, puis avoir deux boutons qui alterneront les vues entre les div en utilisant JavaScript.

Ceci est mon code actuel

function replaceContentInContainer(target, source) {
  document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}

function replaceContentInOtherContainer(replace_target, source) {
  document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML;
}
<html>
<button onClick="replaceContentInContainer('target', 'replace_target')">View Portfolio</button>
<button onClick="replaceContentInOtherContainer('replace_target', 'target')">View Results</button>

<div>
  <span id="target">div1</span>
</div>

<div style="display:none">
  <span id="replace_target">div2</span>
</div>
Développer l'extrait

La deuxième fonction qui remplace div2 ne fonctionne pas, mais la première l'est.

javascript html onclick Jake Ols
la source
Si vous voulez en savoir plus sur le DOM et comment manipuler des éléments en utilisant javascript et sa version jquery, lisez l'article ici: noobieprogrammer.blogspot.com/2020/09/…
doppelgunner

Réponses:

441

Comment afficher ou masquer un élément:

Pour afficher ou masquer un élément, manipulez la propriété de style de l'élément . Dans la plupart des cas, vous souhaitez probablement simplement modifier la displaypropriété de l'élément :

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

Sinon, si vous souhaitez toujours que l'élément occupe de l'espace (comme si vous deviez masquer une cellule de tableau), vous pouvez modifier la visibilitypropriété de l'élément à la place:

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

Masquer une collection d'éléments:

Si vous souhaitez masquer une collection d'éléments, parcourez simplement chaque élément et changez l'élément displayen none:

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));

Afficher l'extrait de code

Affichage d'une collection d'éléments:

La plupart du temps, vous basculerez probablement simplement entre display: noneet display: block, ce qui signifie que ce qui suit peut être suffisant pour afficher une collection d'éléments.

Vous pouvez éventuellement spécifier le paramètre souhaité displaycomme deuxième argument si vous ne souhaitez pas qu'il soit défini par défaut block.

function show (elements, specifiedDisplay) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = specifiedDisplay || 'block';
  }
}

// Usage:
var elements = document.querySelectorAll('.target');
show(elements);

show(elements, 'inline-block'); // The second param allows you to specify a display value

Afficher l'extrait de code

En variante, une meilleure approche pour montrer le ou les éléments serait de simplement supprimer le displaystyle en ligne afin de le ramener à son état initial. Vérifiez ensuite le displaystyle calculé de l'élément afin de déterminer s'il est masqué par une règle en cascade. Si tel est le cas, montrez l'élément.

function show (elements, specifiedDisplay) {
  var computedDisplay, element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    // Remove the element's inline display styling
    element.style.display = '';
    computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');

    if (computedDisplay === 'none') {
        element.style.display = specifiedDisplay || 'block';
    }
  }
}

Afficher l'extrait de code

(Si vous souhaitez aller plus loin, vous pouvez même imiter ce que fait jQuery et déterminer le style de navigateur par défaut de l'élément en ajoutant l'élément à un espace vide iframe(sans feuille de style en conflit), puis récupérer le style calculé. Ce faisant, vous connaîtra la vraie displayvaleur de propriété initiale de l'élément et vous n'aurez pas à coder en dur une valeur pour obtenir les résultats souhaités.)

Basculer l'affichage:

De même, si vous souhaitez basculer displayentre un élément ou une collection d'éléments, vous pouvez simplement parcourir chaque élément et déterminer s'il est visible en vérifiant la valeur calculée de la displaypropriété. Si elle est visible, réglez le displayà none, sinon retirer la ligne de displaystyle, et si elle est toujours caché, définissez la displayà la valeur spécifiée ou par défaut hardcoded, block.

function toggle (elements, specifiedDisplay) {
  var element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    if (isElementHidden(element)) {
      element.style.display = '';

      // If the element is still hidden after removing the inline display
      if (isElementHidden(element)) {
        element.style.display = specifiedDisplay || 'block';
      }
    } else {
      element.style.display = 'none';
    }
  }
  function isElementHidden (element) {
    return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
  }
}

// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
  toggle(document.querySelectorAll('.target'));
});

Afficher l'extrait de code

Josh Crozier
la source
97

Vous pouvez également utiliser le framework JavaScript jQuery :

Pour masquer le bloc de division

$(".divIDClass").hide();

Pour afficher le bloc div

$(".divIDClass").show();
IMRUP
la source
17
La question ne mentionne pas l'utilisation de jQuery
MLeFevre
53
ce qui n'est pas une raison de voter contre. la question ne dit pas spécifiquement de ne pas utiliser jquery, et en plus d'autres personnes venant ici pour voir les réponses peuvent ne pas avoir les mêmes contraintes que l'OP.
Kinjal Dixit le
5
@KinjalDixit Si IMRUP veut ajouter une note indiquant que sa réponse n'utilise pas vanilla JS et s'appuie plutôt sur jQuery, alors cela aurait du mérite, même si la question d'origine n'est pas balisée pour jQuery / mentionne même jQuery. Dans l'état actuel des choses, c'est une réponse utilisant une bibliothèque sans mentionner qu'elle le fait, peu d'explications (bien que probablement tout ce qui est nécessaire) et une utilisation déroutante d'un sélecteur (en utilisant le sélecteur de classe tout en indiquant l' ID ?). Dans l'état actuel des choses, je ne pense pas que ce soit une réponse utile à cette question.
MLeFevre
3
Lors de l'ajout d'un exemple jQuery (qui est une approche parfaitement valide à mon humble avis), veuillez également fournir un exemple JS vanille pour comparaison et expliquer à l'OP la différence. De nos jours, de nombreux nouveaux développeurs pensent que jQuery est JavaScript. Un peu d'éducation les aiderait à faire les bons choix.
Mark Cooper
Je pense que cette réponse était très utile et liée à la question.
mfnx
44

Vous pouvez simplement manipuler le style de la div en question ...

document.getElementById('target').style.display = 'none';
Leo
la source
Mais j'aimerais qu'il affiche également le contenu de la deuxième div
Jake Ols
20

Vous pouvez masquer / afficher la division en utilisant la fonction Js. échantillon ci-dessous

<script>
    function showDivAttid(){

        if(Your Condition) {

            document.getElementById("attid").style.display = 'inline';
        }
        else
        {
            document.getElementById("attid").style.display = 'none';
        }
    }

</script>

HTML - 

<div  id="attid" style="display:none;">Show/Hide this text</div>
Rahul Sawant
la source
si vous souhaitez utiliser un nom de classe au lieu de Id, utilisez comme document.getElementsByClassName ('CLASSNAME') [0] .style.display = 'none';
Vishwa
14

Utilisation du style:

<style type="text/css">
   .hidden {
        display: none;
   {
   .visible {
        display: block;
   }
</style>

L'utilisation d'un gestionnaire d'événements en JavaScript est meilleure que l' onclick=""attribut en HTML:

<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>

<div class="visible" id="portfolio">
    <span>div1</span>
</div>

<div class"hidden" id="results">
    <span>div2</span>
</div>

JavaScript:

<script type="text/javascript">

    var portfolioDiv = document.getElementById('portfolio');
    var resultsDiv = document.getElementById('results');

    var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
    var resultsBtn = document.getElementById('RenderResults_Btn');

    portfolioBtn.onclick = function() {
        resultsDiv.setAttribute('class', 'hidden');
        portfolioDiv.setAttribute('class', 'visible');
    };

    resultsBtn.onclick = function() {
        portfolioDiv.setAttribute('class', 'hidden');
        resultsDiv.setAttribute('class', 'visible');
    };

</script>

jQuery peut vous aider à manipuler facilement les éléments DOM!

Ifch0o1
la source
Vous pouvez essayer l' hiddenattribut HTML5
bobobobo
12

J'ai trouvé ce code JavaScript simple très pratique!

#<script type="text/javascript">
    function toggle_visibility(id) 
    {
        var e = document.getElementById(id);
        if ( e.style.display == 'block' )
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
</script>
Mumtaj
la source
5

Définissez votre HTML comme

<div id="body" hidden="">
 <h1>Numbers</h1>
 </div>
 <div id="body1" hidden="hidden">
 Body 1
 </div>

Et maintenant, définissez le javascript comme

function changeDiv()
  {
  document.getElementById('body').hidden = "hidden"; // hide body div tag
  document.getElementById('body1').hidden = ""; // show body1 div tag
  document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; 
  // display text if JavaScript worked
   }
Andriya
la source
1 
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>
Aguilar Junior
la source
Utiliser Hidden pour un problème comme celui-ci n'est probablement pas une bonne idée - en plus d'être non pris en charge dans les versions IE antérieures à la version 11, l'affiche essaie effectivement de faire quelque chose d'équivalent à une simple interface d'onglet, et ainsi les éléments ne seront pas cachés dans tous les contextes. Dans ce genre de situation, il est probablement préférable d'utiliser 'affichage' pour contrôler le masquage - voir stackoverflow.com/questions/6708247/...
John - Not A Number
1

Simplement simple Définissez l'attribut de style de l'ID:

Pour afficher le div masqué

<div id="xyz" style="display:none">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='block';  // to hide

Pour masquer le div affiché

<div id="xyz">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='none';  // to display
susan097
la source
0

Et la réponse Purescript, pour les personnes utilisant halogène:

import CSS (display, displayNone)
import Halogen.HTML as HH
import Halogen.HTML.CSS as CSS

render state = 
  HH.div [ CSS.style $ display displayNone ] [ HH.text "Hi there!" ]

Si vous "inspectez l'élément", vous verrez quelque chose comme:

<div style="display: none">Hi there!</div>

mais rien ne s'affichera réellement sur votre écran, comme prévu.

Colin Woodbury
la source
0

Juste une fonction simple nécessaire pour implémenter Afficher / masquer 'div' en utilisant JavaScript

<a id="morelink" class="link-more" style="font-weight: bold; display: block;" onclick="this.style.display='none'; document.getElementById('states').style.display='block'; return false;">READ MORE</a>


<div id="states" style="display: block; line-height: 1.6em;">
 text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here  
    <a class="link-less" style="font-weight: bold;" onclick="document.getElementById('morelink').style.display='inline-block'; document.getElementById('states').style.display='none'; return false;">LESS INFORMATION</a>
    </div>
Ashar Zafar
la source
0

J'ai trouvé cette question et récemment, j'ai implémenté certaines interfaces utilisateur en utilisant Vue.js, donc cela peut être une bonne alternative.

Tout d'abord, votre code ne se cache pas targetlorsque vous cliquez sur Afficher le profil. Vous remplacez le contenu targetpar div2.

let multiple = new Vue({
  el: "#multiple",
  data: {
    items: [{
        id: 0,
        name: 'View Profile',
        desc: 'Show profile',
        show: false,
      },
      {
        id: 1,
        name: 'View Results',
        desc: 'Show results',
        show: false,
      },
    ],
    selected: '',
    shown: false,
  },
  methods: {
    showItem: function(item) {
      if (this.selected && this.selected.id === item.id) {
        item.show = item.show && this.shown ? false : !item.show;
      } else {
        item.show = (this.selected.show || !item.show) && this.shown ? true : !this.shown;
      }
      this.shown = item.show;
      this.selected = item;
    },
  },
});
<div id="multiple">
  <button type="button" v-for="item in items" v-on:click="showItem(item)">{{item.name}}</button>

  <div class="" v-if="shown">: {{selected.desc}}</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
Développer l'extrait

Teocci
la source
0

Vous pouvez facilement y parvenir avec l'utilisation de jQuery .toggle () .

$("#btnDisplay").click(function() {
  $("#div1").toggle();
  $("#div2").toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  First Div
</div>
<div id="div2" style="display: none;">
  Second Div
</div>
<button id="btnDisplay">Display</button>
Tchad
la source
0

Au lieu de cela, vos deux fonctions utilisent la togglefonction avec le corps suivant

this[target].parentNode.style.display = 'none'
this[source].parentNode.style.display = 'block'

Afficher l'extrait de code

Kamil Kiełczewski
la source