Mostrar / ocultar 'div' usando JavaScript

185

Para un sitio web que estoy haciendo, quiero cargar un div y ocultar otro, luego tengo dos botones que alternarán las vistas entre el div usando JavaScript.

Este es mi código actual

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 fragmento

La segunda función que reemplaza a div2 no funciona, pero la primera sí.

javascript html onclick Jake Ols
fuente

Respuestas:

430

Cómo mostrar u ocultar un elemento:

Para mostrar u ocultar un elemento, manipule la propiedad de estilo del elemento . En la mayoría de los casos, probablemente solo desee cambiar la displaypropiedad del elemento :

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

Alternativamente, si aún desea que el elemento ocupe espacio (como si ocultara una celda de tabla), podría cambiar la visibilitypropiedad del elemento en su lugar:

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

Ocultar una colección de elementos:

Si desea ocultar una colección de elementos, simplemente repita cada elemento y cambie los elementos displaya 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 fragmento de código

Mostrando una colección de elementos:

La mayoría de las veces, probablemente solo alternará entre display: noney display: block, lo que significa que lo siguiente puede ser suficiente al mostrar una colección de elementos.

Opcionalmente, puede especificar el deseado displaycomo segundo argumento si no desea que sea predeterminado 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 fragmento de código

Alternativamente, un mejor enfoque para mostrar los elementos sería simplemente eliminar el displayestilo en línea para volver a su estado inicial. Luego verifique el displayestilo calculado del elemento para determinar si está oculto por una regla en cascada. Si es así, muestra el 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 fragmento de código

(Si desea ir un paso más allá, incluso podría imitar lo que hace jQuery y determinar el estilo predeterminado del navegador del elemento agregando el elemento a un espacio en blanco iframe(sin una hoja de estilo en conflicto) y luego recuperar el estilo calculado. Al hacerlo, usted sabrá el verdadero displayvalor de propiedad inicial del elemento y no tendrá que codificar un valor para obtener los resultados deseados).

Alternar la pantalla:

Del mismo modo, si desea alternar displayentre un elemento o una colección de elementos, simplemente puede iterar sobre cada elemento y determinar si es visible comprobando el valor calculado de la displaypropiedad. Si es visible, establecer el displayque none, de otro modo retirar la línea displayde estilo, y si todavía está oculto, establecer el displayal valor especificado o por defecto codificada, 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 fragmento de código

Josh Crozier
fuente
97

También puede usar el marco jQuery JavaScript:

Para ocultar el bloque div

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

Para mostrar Div Block

$(".divIDClass").show();
IMRUP
fuente
17
La pregunta no menciona el uso de jQuery
MLeFevre
53
lo cual no es una razón para el voto negativo. la pregunta no dice específicamente que no use jquery, y además otras personas que vienen aquí para ver las respuestas pueden no tener las mismas restricciones que el OP.
Kinjal Dixit
55
@KinjalDixit Si IMRUP quiere agregar una nota de que su respuesta no usa JS de vainilla y en su lugar se basa en jQuery, entonces tendría algún mérito, aunque la pregunta original no está etiquetada para jQuery / incluso menciona jQuery. Tal como está actualmente, es una respuesta usando una biblioteca sin mencionar que lo hace, poca (aunque probablemente todo lo que sea necesario) explicación y el uso confuso de un selector (¿usando el selector de clase mientras se indica ID ?). Tal como está actualmente, no creo que sea una respuesta útil a esta pregunta.
MLeFevre
3
Al agregar un ejemplo de jQuery (que es un enfoque perfectamente válido en mi humilde opinión), proporcione también un ejemplo de JS de vainilla para comparar y explique al OP la diferencia. Muchos desarrolladores nuevos en estos días piensan que jQuery es JavaScript. Un poco de educación los ayudaría a tomar las decisiones correctas.
Mark Cooper el
Creo que esta respuesta fue muy útil y relacionada con la pregunta.
mfnx
44

Simplemente puede manipular el estilo del div en cuestión ...

document.getElementById('target').style.display = 'none';
León
fuente
Pero también me gustaría que mostrara el contenido del segundo div
Jake Ols, el
20

Puede Ocultar / Mostrar Div utilizando la función Js. muestra a continuación

<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
fuente
si desea usar el nombre de la clase en lugar de Id, use como document.getElementsByClassName ('CLASSNAME') [0] .style.display = 'none';
Vishwa
14

Usando estilo:

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

Usar un controlador de eventos en JavaScript es mejor que el onclick=""atributo 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 puede ayudarte a manipular elementos DOM fácilmente!

Ifch0o1
fuente
Puedes probar el hiddenatributo de HTML5
bobobobo el
12

¡Encontré este simple código JavaScript muy ú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
fuente
5

Establece tu HTML como

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

Y ahora configura el 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
fuente
1 
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>
Aguilar Junior
fuente
El uso de Hidden para un problema como este probablemente no sea una buena idea, además de no ser compatible con las versiones de IE anteriores a la 11, el póster está tratando de hacer algo equivalente a una interfaz de pestaña simple, por lo que los elementos no estarán ocultos en todos los contextos En este tipo de situación, probablemente sea mejor usar 'display' para controlar el ocultamiento - vea stackoverflow.com/questions/6708247/…
John - Not A Number
1

Simplemente simple Establezca el atributo de estilo de ID:

Para mostrar el div oculto

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

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

Para ocultar el div mostrado

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

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

Y la respuesta Purescript, para las personas que usan halógenos:

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 "inspecciona el elemento", verá algo como:

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

pero nada se mostrará en su pantalla, como se esperaba.

Colin Woodbury
fuente
0

Solo una función simple necesita implementar Mostrar / ocultar '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
fuente
0

Encontré esta pregunta y recientemente estaba implementando algunas UI usando Vue.js, por lo que esta puede ser una buena alternativa.

Primero, su código no se oculta targetcuando hace clic en Ver perfil. Estás anulando el contenido targetcon 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 fragmento

Teocci
fuente
0

Puede lograr esto fácilmente con el uso 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>
Chad
fuente