CODEWITHSUNDEEP
javascriptjqueryhtml
tgrobinson
tgrobinson

Reputation: 233

How do I toggle between divs using a button?

I have been working on my first experimental website and for the front page there is a image slide show div section on the page. I have a button in the top right corner to sign in. When the user clicks the sign in button, id like the image slide show to be hidden and a login form to be displayed in its place.

I'm hoping to click this button. (The styling for the button is in a css file connected to the div.)

<a href="javascript:void(0);" id="signin">
  <div id="logbutton">
    Sign in
  </div>
</a>

I want to toggle between these two 

<div id="pic">
  <img src="img/header.jpg" id="imgBanner" />
</div>

<div id="logbox" style="display: none;">
  Login form
</div>

On clicking the button, this javascript function is/should be run

$(function(){
  $('#signin').click(function(){
    $('#pic').toggle();
    $('#logbox').toggle(); 
  });
});

I get the feeling I've missed something or I may have miss used this code entirely.

Upvotes: 1

Views: 231

Answers (1)

Andre Figueiredo
Andre Figueiredo

Reputation: 13425

First: I would do this like this:

<script>
 var showLoginForm = false;
 $(function(){
   $('#signin').click(function(){
    $('#pic,#logbox').hide();
    $('#pic').toggle(!showLoginForm);
    $('#logbox').toggle(showLoginForm);
  });
 });
</script>

Second: It's a bad HTML practice put block elements (divs, table, etc.) inside inline elements (a, span, etc). Remove the and style according to your needs, here is an example:

<style>
 .linkButton {
  display: inline-block;
  height: 20px;
  padding: 5px;
 }
</style>
<a href="javascript:void(0);" id="signin" class="linkButton">Sign in</a>

Upvotes: 1

Related Questions