Can this jquery script be written more elegantly?

Question

Both blocks of code in Jquery section are doing exactly the same thing(hiding each other's respective form and changing their own background color). Code is:

$(document).ready(function() {

  $('#messageForm').hide();
  $('#message').click(function() {
    $("#message").children().css("background-color", "");
    $("#creative").children().css("background-color", "#a6a6a6");
    $('#messageForm').show();
    $('#creativeForm').hide();

  });
  $('#creative').click(function() {
    $("#message").children().css("background-color", "#a6a6a6");
    $("#creative").children().css("background-color", "");
    $('#messageForm').hide();
    $('#creativeForm').show();

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="message">message</button>
<button id="creative">creative</button>


<div class="col-sm-12">
  <div id="creativeForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Creative</a></div>
  </div>
  <div id="messageForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Message</a></div>
  </div>
</div>

Answer 1

Slightly more elegant JS solution:

$(function(){

  var $forms = $("#creativeForm, #messageForm")
        .hide(),
      $buttons = $("#creative, #message")
        .css("background-color", "grey")
        .click(function(){
          $buttons.css("background-color", "grey");
          $forms.hide();
          $(this).css("background-color", "green");
          $('#' + this.id + 'Form').show();
        });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button id="message">message</button>
<button id="creative">creative</button>

<div class="col-sm-12">
  <div id="creativeForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Creative</a></div>
  </div>
  <div id="messageForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Message</a></div>
  </div>
</div>

But you can do all this in CSS (which is definitely more elegant)...

label[for=message],
label[for=creative] {
  display: inline-block;
  background: #eee;
  padding: 10px;
}

#messageForm,
#creativeForm {
  display: none;
}

#message,
#creative {
  visibility: hidden;
  position: absolute;
  top: -100%
}

#message:checked~label[for=message],
#creative:checked~label[for=creative] {
  background:green;
}

#message:checked~#messageForm,
#creative:checked~#creativeForm {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12">
  <input type="radio" name="showForm" id="message" />
  <input type="radio" name="showForm" id="creative" />
  <label for="message">message</label>
  <label for="creative">creative</label>
  <div id="creativeForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Creative</a></div>
  </div>
  <div id="messageForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Message</a></div>
  </div>
</div>

N.B If you want one of the forms visible by default simply preselect the appropriate input. EG: <input type="radio" name="showForm" id="message" checked="checked" />. Also, if your form is submitted but returns with an error it is easy to reestablish the active form and values.

Answer 2

At least on the js side, since each of the click functions are effectively doing the same thing, you can abstract that into its own function that takes in some variables. I'm also not seeing the "creative" and "message" id's in your HTML...are they supposed to also be "creativeForm" and "messageForm"?

function swapShowHide(show, hide) {
    $(show).show().children().css( "background-color", "" );
    $(hide).hide().children().css( "background-color", "#a6a6a6" );
}

$('#creativeForm').click(swapShowHide.bind('#creativeForm', '#messageForm');
$('#messageForm').click(swapShowHide.bind('#messageForm', '#creativeForm'); 

Answer 3

Using one click handler, set defaults for both elements, then override the defaults for the clicked element (this):

$('#creative, #message').click(function() {
  $("#creative, #message").css("background-color", "#a6a6a6");
  $("#creativeForm, #messageForm").hide();

  $(this).css("background-color", "");
  $('#' + this.id + 'Form').show();
});

(Note that your button elements don't have any children.)

Snippet:

$(document).ready(function() {

  $('#messageForm').hide();

  $('#creative, #message').click(function() {
    $("#creative, #message").css("background-color", "#a6a6a6");
    $("#creativeForm, #messageForm").hide();

    $(this).css("background-color", "");
    $('#' + this.id + 'Form').show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="message">message</button>
<button id="creative">creative</button>


<div class="col-sm-12">
  <div id="creativeForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Creative</a></div>
  </div>
  <div id="messageForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Message</a></div>
  </div>
</div>