Mostrar / ocultar 'div' usando JavaScript

185

Para um site que estou fazendo, quero carregar uma div e ocultar outra e, em seguida, tenho dois botões que alternam as visualizações entre a div usando JavaScript.

Este é o meu código atual

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>

Expandir snippet

A segunda função que substitui div2 não está funcionando, mas a primeira é.

javascript html onclick Jake Ols
fonte

430

Como mostrar ou ocultar um elemento:

Para mostrar ou ocultar um elemento, manipule a propriedade de estilo do elemento . Na maioria dos casos, você provavelmente só deseja alterar a displaypropriedade do elemento :

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

Como alternativa, se você ainda deseja que o elemento ocupe espaço (como se você ocultasse uma célula da tabela), poderá alterar a visibilitypropriedade do elemento :

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

Ocultando uma coleção de elementos:

Se você deseja ocultar uma coleção de elementos, itere sobre cada elemento e altere os elementos displaypara 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'));

Mostrar snippet de código

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>

Expandir snippet

Mostrando uma coleção de elementos:

Na maioria das vezes, você provavelmente apenas alternará entre display: nonee display: block, o que significa que o seguinte pode ser suficiente ao mostrar uma coleção de elementos.

Opcionalmente, você pode especificar o desejado displaycomo o segundo argumento, se não desejar que ele seja o padrão 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

Mostrar snippet de código

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

Expandir snippet

Como alternativa, uma abordagem melhor para mostrar o (s) elemento (s) seria apenas remover o displayestilo embutido para revertê-lo ao seu estado inicial. Em seguida, verifique o displayestilo calculado do elemento para determinar se ele está sendo oculto por uma regra em cascata. Se sim, então mostre o elemento.

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';
    }
  }
}

Mostrar snippet de código

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>

Expandir snippet

(Se você quiser dar um passo adiante, pode até imitar o que o jQuery faz e determinar o estilo padrão do navegador do elemento, acrescentando o elemento a um espaço em branco iframe(sem uma folha de estilo conflitante) e recuperando o estilo calculado. saberá a verdadeira inicialdisplay valor da propriedade do elemento e você não precisará codificar um valor para obter os resultados desejados.)

Alternando a exibição:

Da mesma forma, se você deseja alternar displayentre um elemento ou uma coleção de elementos, basta iterar sobre cada elemento e determinar se ele é visível, verificando o valor calculado da displaypropriedade. Se estiver visível, defina displaycomo none, caso contrário, remova o displayestilo embutido e, se ainda estiver oculto, defina o displayvalor especificado ou o padrão codificado 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'));
});

Mostrar snippet de código

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>

Expandir snippet

Josh Crozier
fonte

97

Você também pode usar a estrutura JavaScript do jQuery :

Para ocultar o bloco div

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

Para mostrar o bloco div

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

IMRUP
fonte

17

A questão não menciona usando jQuery

MLeFevre

53

o que não é motivo para voto negativo. a pergunta não diz especificamente para não usar jquery e, além de outras pessoas que vêm aqui para visualizar as respostas, pode não ter as mesmas restrições que o OP.

Kinjal Dixit

5

@KinjalDixit Se o IMRUP quiser adicionar uma observação de que sua resposta não usa JS vanilla e se baseia no jQuery, ela teria algum mérito, mesmo que a pergunta original não esteja marcada para jQuery / até mencione jQuery. Atualmente, é uma resposta usando uma biblioteca sem mencionar que o faz, pouca explicação (embora provavelmente seja tudo o que é necessário) e uso confuso de um seletor (usando o seletor de classe enquanto informa o ID ?). Como está atualmente, não acho que seja uma resposta útil para essa pergunta.

MLeFevre 6/01/2015

3

Ao adicionar um exemplo de jQuery (que é uma abordagem perfeitamente válida para IMHO), forneça também um exemplo de JS baunilha para comparação e explique ao OP a diferença. Atualmente, muitos novos desenvolvedores pensam que o jQuery é JavaScript. Uma pequena educação os ajudaria a fazer as escolhas certas.

Mark Cooper

Eu acho que essa resposta foi muito útil e relacionada à pergunta.

Mfnx

44

Você pode simplesmente manipular o estilo da div em questão ...

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

Leo
fonte

Mas eu gostaria que ele também exibisse o conteúdo da segunda div

Jake Ols

20

Você pode ocultar / mostrar Div usando a função Js. amostra abaixo

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

se você quiser usar o nome da classe em vez do Id, use como document.getElementsByClassName ('CLASSNAME') [0] .style.display = 'none';

Vishwa

14

Usando o estilo:

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

Usar um manipulador de eventos em JavaScript é melhor que o onclick=""atributo em 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>

O jQuery pode ajudá-lo a manipular elementos DOM com facilidade!

Ifch0o1
fonte

Você pode tentar o hiddenatributo de HTML5

bobobobo

12

Achei esse código JavaScript simples muito útil!

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

5

Defina seu HTML como

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

E agora defina o javascript como

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
fonte

1

<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>

Aguilar Junior
fonte

Usar o Hidden para um problema como esse provavelmente não é uma boa ideia - além de não ser suportado nas versões do IE anteriores ao 11, o pôster está efetivamente tentando fazer algo equivalente a uma interface de guia simples, para que os elementos não sejam ocultados. todos os contextos. Nesse tipo de situação, provavelmente é melhor usar 'display' para controlar o esconderijo - consulte stackoverflow.com/questions/6708247/…

John - Not A Number

1

Just Simple Defina o atributo de estilo do ID:

Para mostrar a div oculta

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

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

Para ocultar a div mostrada

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

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

susan097
fonte

0

E a resposta Purescript, para pessoas que usam Halogênio:

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!" ]

Se você "inspecionar elemento", verá algo como:

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

mas nada será exibido na tela, conforme o esperado.

Colin Woodbury
fonte

0

A função Just Simple precisa implementar Show / hide 'div' usando 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
fonte

0

Encontrei essa pergunta e recentemente eu estava implementando algumas interfaces de usuário usando o Vue.js, portanto essa pode ser uma boa alternativa.

Primeiro, seu código não está oculto targetquando você clica em Exibir perfil. Você está substituindo o conteúdo targetpor 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>

Expandir snippet

Teocci
fonte

0

Você pode conseguir isso facilmente com o uso do 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>

Chade
fonte

Mostrar / ocultar 'div' usando JavaScript

Respostas:

Como mostrar ou ocultar um elemento:

Ocultando uma coleção de elementos:

Mostrando uma coleção de elementos:

Alternando a exibição: