CODEWITHSUNDEEP
jqueryhtmlcssbackground-color
Artur Tomczyk
Artur Tomczyk

Reputation: 1

how to set background-color when div is hidden

I slide down and display a hidden div on click.

<style>
    hide { display: hidden;}
    content {  background-color: black; }
</style>

<div class="content, hide">

<script>
    $(.content).slideDown();<br>
    $(.content).removeClass("hidden");
</script>

everything works except setting the background color. I have tried setting the background color with jQuery .css() but it doesn't work. When I remove the hide class it works.

Upvotes: 0

Views: 3749

Answers (5)

Antajo Paulson
Antajo Paulson

Reputation: 584

<div id="scroll_Div" class="content hide">

.hide { display: hidden; }
.content {  background-color: black; }

<script>
    $(document).click(function(){
      $("#scroll_Div").removeClass("hidden");
    });

Upvotes: 0

Ashley Medway
Ashley Medway

Reputation: 7301

So a few points:

  1. Remove comma from class names <div class="content hide">...</div>

  2. CSS classes should start with a full stop/period (.)

    .hide { display: hidden; }
    .content { background-color: black; }

  3. display: hidden is in correct, you are after display:none in your hide class. Alternatively you are looking for visibility:hidden.

  4. jQuery selector should contain quotes $('.content')
  5. The class you are removing should be hide not hidden $('.content').removeClass("hide");
  6. Technically you do not need to remove the .hide class as slideDown() will add a display:block override.
  7. In your script you seem to have a random <br> which will cause a syntax error.

$(function () {
  $('.content').slideDown();
});
.hide { display: none; }
.content {
  background-color: black;
  height: 100px;
}
.content h1 { color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content hide">
  <h1>My Content</h1>
</div>

Upvotes: 1

Aru
Aru

Reputation: 1870

update your code: "remove , from the html class, and add . to the classes in css, and add '' to the jquery"

HTML

<div class="content hide">

CSS

.hide { display: hidden; }
.content { background-color: black; }

Script

$('.content').slideDown();
$('.content').removeClass("hide");

Upvotes: 0

Choco
Choco

Reputation: 1064

Hi please check with the below code

<style>
.hide { display: none; }
.content {  background-color: black; }
</style>
<div class="content hide">
<p>sdaaaaaaaaaaaaaaaaa</p>
</div>
<input type="button" id="clickme" value="clickme">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>


$("#clickme").click(function() {
$(".content").slideDown();
$(".content").removeClass("hide");

});
</script>

Upvotes: 0

Techy
Techy

Reputation: 2654

Remove the comma from class property of div

<div class="content, hide" to <div class="content hide"

Make css like this:

.hide { display: hidden; }
.content {  background-color: black; }

Make jquery like this:

$('.content').slideDown();
$('.content').removeClass("hide");

Upvotes: 0

Related Questions