（jQuery）将div样式“display：none”切换为“display：inline”

Question

I have 2 divs which and I want to be able to toggle between them onClick of a button (currently using .toggle();)

The div that shows on the page is div1. This div has the style 'display:inline'. My other div (div2) starts with the style 'display:none'.

When the div1 switches to div2, I want div2 to have the style of "display:inline". How do I do this?

EDIT: This is working:

$(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

I would use .toggleClass() as toggle switches between display: inline; and display: block;

Create a hidden and inline class and just toggle those.

Answer 2

Using plain JavaScript, you could use:

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

Answer 3

Here is a simple way to do it:

1. For the html, we have a simple button to call the "toggleFunction" that will add and remove display classes to our Div elements as necessary.

   <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. We'll set the default display properties of Div 1 and Div 2 to "inline" and "none" respectively, so that by default:

   • Div 1 is Shown, and
   • Div 2 is Hidden.

Here is the css for that:

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

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

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

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

3. Finally, we'll use Jquery to add and remove the "display-none" and the "display-inline" classes to Div 1 and Div 2 respectively by calling our "toggleFunction" when the button is clicked.

Here is the Jquery for that:

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

You can try it out on codepen here: http://codepen.io/anon/pen/vEbXwG