Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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


      }


  });
});
like image 783
Dean Avatar asked Mar 17 '12 13:03

Dean


1 Answers

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

Create a hidden and inline class and just toggle those.

like image 68
mikevoermans Avatar answered Sep 20 '22 18:09

mikevoermans