(jQuery) Attiva/disattiva lo stile div "display: none" su "display: inline"

Question

Ho 2 div che desidero essere in grado di alternare tra loro onFare clic su un pulsante (attualmente usando .toggle();)

Il div visualizzato nella pagina è div1. Questo div ha lo stile 'display: inline'. L'altra mia div (div2) inizia con lo stile 'display: none'.

Quando div1 passa a div2, voglio div2 avere lo stile di "display: inline". Come faccio a fare questo?

EDIT: Questo è il lavoro:

$(function(){ 
    $('#button').click(function(){ 

    $('#div1').toggleClass('hide'); 

if ($('#div2').is('.hidden')) { 

      $('#div2').removeClass('hidden'); 
      $('#div2').addClass('show'); 


     } 
     else{ 

      $('#div2').addClass('hidden'); 
      $('#div2').removeClass('show'); 


     } 


    }); 
}); 

Answer 1

userei .toggleClass() come interruttori a levetta tra display: inline; e display: block;

Creare una classe nascosta e in linea e solo attivare o disattivare quelli.

Answer 2

Utilizzando pianura JavaScript, è possibile utilizzare:

document.getElementById('div1').style.display = 'none'; 
document.getElementById('div2').style.display = 'inline'; 

Answer 3

Ecco un modo semplice per farlo:

1. Per l'html, abbiamo un semplice pulsante per chiamare il "toggleFunction" ciò aggiungerà e rimuoverà le classi di visualizzazione ai nostri elementi Div, se necessario.

   <button onclick="toggleFunction()" >Click to toggle</button>

   <div id="div1" class=" " > Now showing "Div 1" </div>

   <div id="div2" class=" " > Now showing "Div 2" </div>

2. Noi imposteremo le proprietà di visualizzazione di default di Div 1 e Div 2 a "inline" e "none", rispettivamente, in modo che per impostazione predefinita:

   • Div 1 è mostrato e
   • Div 2 è nascosto.

Ecco il css per questo:

#div1 { 
    display: inline; 
    color:blue; 
} 

#div2 { 
    display: none; 
    color:red; 
} 

.display-none { 
    display: none !important; 
} 

.display-inline { 
    display: inline !important; 
} 

3. Infine, useremo jQuery per aggiungere e rimuovere il "Display-none" e le classi "display-inline" a Div 1 e Div 2 rispettivamente chiamando la nostra "toggleFunction" quando si fa clic sul pulsante.

Ecco la Jquery per questo:

function toggleFunction() { 
    $("#div1").toggleClass("display-none");  
    $("#div2").toggleClass("display-inline");  
    } 

Si può provare su codepen qui: http://codepen.io/anon/pen/vEbXwG