CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dreams
Dreams

Reputation: 8506

How to not enable toggle class at first?

$(document).ready(function(){
  $("#summary").click(function(){
    $(this).toggleClass('clicked');
  });
});
.clicked {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        
<div id="summary">
  <div class="clicked">111</div>
  <div class="clicked">222</div>
</div>

How to not set beckoned-color to red when html page load.Only change it to red when click on its div?

Upvotes: 0

Views: 77

Answers (4)

Rvervuurt
Rvervuurt

Reputation: 8963

You have already added the .clicked to the divs when your page is loading, while you want to toggle the class by clicking on the div. Try the below code:

$(function(){
  $(document).on('click', '#summary', function(){
    $(this).toggleClass('clicked');
  });
});
.clicked {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        
<div id="summary">
  <div class="someclass">111</div>
  <div class="someclass">222</div>
</div>

Upvotes: 2

Pramod Karandikar
Pramod Karandikar

Reputation: 5329

Remove class clicked from the HTML. It will become red only after the click.

<div id="summary">
  <div class="">111</div>
  <div class="">222</div>
</div>

Upvotes: 0

dreamweiver
dreamweiver

Reputation: 6002

Just remove the inline class clicked from the div tags

HTML CODE:

<div id="summary">
  <div >111</div>
  <div >222</div>
</div>

Live demo @ JSFiddle:http://jsfiddle.net/dreamweiver/qjrahp6t/

Upvotes: 0

martynasma
martynasma

Reputation: 8595

Remove class="clicked" from your divs?

$(document).ready(function(){
  $("#summary").click(function(){
    $(this).toggleClass('clicked');
  });
});
.clicked {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        
<div id="summary">
  <div>111</div>
  <div>222</div>
</div>

Upvotes: 2

Related Questions