web-dev-qa-db-fra.com

Afficher/masquer 'div' en utilisant JavaScript

Pour un site Web que je suis en train de créer, je souhaite charger un div et en cacher un autre, puis disposer de deux boutons permettant de basculer 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>

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

javascripthtmlonclick
157
Jake Ols

Comment afficher ou masquer un élément:

Pour afficher ou masquer un élément, manipulez la propriété style de l'élément . Dans la plupart des cas, vous souhaiterez probablement simplement modifier la propriété display 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

Si vous souhaitez toujours que l'élément occupe un espace (comme si vous deviez masquer une cellule de tableau), vous pouvez modifier la propriété visibility 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, il suffit de parcourir chaque élément et de changer la variable display de l'élément en 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'));


hide(document.querySelectorAll('.target'));

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}
<div class="target">This div will be hidden.</div>

<span class="target">This span will be hidden as well.</span>

Afficher une collection d'éléments:

La plupart du temps, vous ne ferez probablement que basculer entre display: none et display: block, ce qui signifie que les peuvent suivants seront suffisants pour afficher une collection d'éléments.

Vous pouvez éventuellement spécifier la variable display souhaitée comme second argument si vous ne souhaitez pas que la valeur par défaut soit 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


var elements = document.querySelectorAll('.target');

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

show(document.getElementById('hidden-input'));

function show (elements, specifiedDisplay) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = specifiedDisplay || 'block';
  }
}
<div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div>

<span>Inline span..</span>

<input id="hidden-input" />

Sinon, une meilleure approche pour montrer le ou les éléments serait simplement de supprimer le style en ligne display afin de le ramener à son état initial. Ensuite, vérifiez le style display calculé de l'élément afin de déterminer s'il est masqué par une règle en cascade. Si tel est le cas, affichez 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';
    }
  }
}


show(document.querySelectorAll('.target'));

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';
    }
  }
}
<span class="target" style="display: none">Should revert back to being inline.</span>

<span class="target" style="display: none">Inline as well.</span>

<div class="target" style="display: none">Should revert back to being block level.</div>

<span class="target" style="display: none">Should revert back to being inline.</span>

(Si vous voulez 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 à une variable iframe (sans feuille de style en conflit), puis récupérer le style calculé. vous connaîtrez la valeur réelle initiale de la propriété display de l'élément et vous n'aurez pas à coder en dur une valeur pour obtenir les résultats souhaités.)

Basculement de l'affichage:

De même, si vous souhaitez basculer la display d'un élément ou d'une collection d'éléments, vous pouvez simplement effectuer une itération sur chaque élément et déterminer s'il est visible en vérifiant la valeur calculée de la propriété display. Si elle est visible, définissez display sur none, sinon supprimez le style inline display et, s'il est toujours masqué, définissez display sur la valeur spécifiée ou la valeur codée en dur, 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'));
});


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

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';
  }
}
.target { display: none; }
<button id="toggle-button">Toggle display</button>

<span class="target">Toggle the span.</span>

<div class="target">Toggle the div.</div>

359
Josh Crozier

Vous pouvez également utiliser le framework jQuery JavaScript:

Masquer le bloc div

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

Montrer bloc div

$(".divIDClass").show();
78
IMRUP

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

document.getElementById('target').style.display = 'none';
38
Leo

Vous pouvez masquer/afficher Div 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>
18
Rahul Sawant

Utiliser le style:

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

L'utilisation d'un gestionnaire d'événements en JavaScript est préférable à l'attribut onclick="" 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 du DOM!

14
Ifch0o1

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

Définissez votre code 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
   }
4
Andriya
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>
1
Aguilar Junior

J'ai trouvé cette question et récemment, j'ai implémenté des interfaces utilisateur à l'aide de Vue.js, ce qui peut être une bonne alternative.

Tout d'abord, votre code ne cache pas target lorsque vous cliquez sur Afficher le profil. Vous écrasez le contenu target avec 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>

0
Teocci

Et la réponse Purescript, pour les personnes utilisant Halogen:

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 un élément", vous verrez quelque chose comme:

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

mais rien ne sera réellement affiché sur votre écran, comme prévu.

0
Colin Woodbury

Juste une fonction simple Besoin d'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>
0
Ashar Zafar

Just Simple Définissez l'attribut de style de l'ID:

Pour montrer le div caché

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

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

Pour cacher le div montré

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

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