(jQuery) Toggle div style "display:none" to "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');


      }


  });
});

score 25 · Accepted Answer · edited Aug 22 '13 at 16:53

25

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

Create a hidden and inline class and just toggle those.

edited Aug 22 '13 at 16:53

Hanna

10,315
11
56
89

answered Mar 17 '12 at 13:29

mikevoermans

3,967
22
27

I'm trying this but div2 doesn't show. I updated the code in my question. – Dxx Mar 17 '12 at 14:04
My mistake, the script I'm using in the question is working! Forgot to clear cache :) Thank you! – Dxx Mar 17 '12 at 14:07

score 7 · Answer 2 · answered Mar 17 '12 at 13:44

7

Using plain JavaScript, you could use:

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

answered Mar 17 '12 at 13:44

c24w

7,421
7
39
47

score 1 · Answer 3 · answered Mar 24 '15 at 11:52

Here is a simple way to do it:

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

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

score 0 · Answer 4 · answered May 27 '21 at 13:43

Make your own if clause to toggle the div's style:

$(document).on("click","#mybutton",function(){
  var toggled=$("#mydiv");
  
  // instead of this which would make a block appear
  // toggled.toggle();
  
  // do this: create your own toggle if clause.
  if(toggled.is(":visible"))
    toggled[0].style.display="none";
  else
    toggled[0].style.display="inline";
});

#mydiv{
 display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mydiv">hello</div>
<button id="mybutton">toggle</button>

(jQuery) Toggle div style "display:none" to "display:inline"

4 Answers4

Linked