Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

How can I make the first part identical to the second ?

Avatar of Jazzy 1012
Jazzy 1012 asked on
JavaScriptCSS
1 Comment1 Solution122 ViewsLast Modified:
see.png
My outcome is the first part of the image, however I want the second part! Here is my code:

Css:
label .hide11{
	display: none;
}.colour-button1 {
  display: none;
}
.colour-button1 + label {
  background:  #c1c1c1;
  color: white;
  border-radius: 5px;
  padding: 18px 200px;
}
.colour-button1:checked + label {
  background: #cf5630;
}
.labe1{
	padding:18px 207px !important;
}

Code + js:
<form>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn1" /><label for="btn1"><i class="fa fa-check-circle hide11" id="chk-btn1"></i>  Thursday, March 2nd</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn2" /><label for="btn2" class="labe1"><i class="fa fa-check-circle hide11" id="chk-btn2"></i>  Tuesday, March 7th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn3" /><label for="btn3"><i class="fa fa-check-circle hide11" id="chk-btn3"></i>  Thursday, March 16th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn4" /><label for="btn4" class="labe1"><i class="fa fa-check-circle hide11" id="chk-btn4"></i>  Tuesday, March 21st</label>
</form>
</center>
<center class="cen">
<button  class="disabled white cbtn1 c2" type="submit" id="submit" disabled>NEXT &nbsp;&nbsp;&nbsp;<i class="fa fa-long-arrow-right"></i></button>
</center>

<script>
$('.colour-button1').click(function () {
	$("#chk-"+this.id).show();
    //check if checkbox is checked
    if ($(this).is(':checked')) {

	$('#submit').removeAttr('disabled').addClass('orangeBtn23').removeClass('disabled'); //enable input

    } else {
        $('#submit').attr('disabled', true).removeClass('orangeBtn23').addClass('disabled'); //disable input
        $("#chk-"+this.id).hide(); 
    }
});

</script>