CODEWITHSUNDEEP
jquerycsstoggleclass
Takuhii
Takuhii

Reputation: 925

ToggleClass won't work

I have some HTML that I want to "highlight" when I click on it. Pretty straightforward stuff, but i cannot for the life of me get toggleClass to work :/

Here is the HTML:

<div id="mainContent">
    <div id="pageTop">
        ...
    </div>

    <div id="content">
        <h2>2 Special Offers</h2>
        <p>1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
      <div id="prod1">
            <img src="images/prod1-1.png" width="130" height="109" alt="">
        </div>

        <div id="prod2">
            <div id="holdingBox1" class="one">
                <p>Choose from over 32 products</p>
            </div>
        </div>

        <div id="prod3">
            <div id="holdingBox2" class="two">
                <p>Choose from over 32 products</p>
            </div>
        </div>
    </div>

    <div class="flyout1">
        <div id="subProd">Prod 1</div>
        <div id="subProd">Prod 2</div>
        <div id="subProd">Prod 3</div>
        <div id="subProd">Prod 4</div>
        <div id="subProd">Prod 5</div>
        <div id="subProd">Prod 6</div>
        <div id="subProd">Prod 7</div>
        <div id="subProd">Prod 8</div>
    </div>

    <div class="flyout2">
        <div id="subProd">Prod 1</div>
        <div id="subProd">Prod 2</div>
        <div id="subProd">Prod 3</div>
        <div id="subProd">Prod 4</div>
        <div id="subProd">Prod 5</div>
        <div id="subProd">Prod 6</div>
        <div id="subProd">Prod 7</div>
        <div id="subProd">Prod 8</div>
    </div>

    <div id="restOfPage">
    ...
    </div>
</div>

and here is the jQuery:

$(document).ready(function() {
$('.flyout1').hide();
$("#holdingBox1").on("click",function(){
    $(this).toggleClass("hover");
    $(".flyout1").slideToggle();
    $(".flyout2").hide();
});
$('.flyout2').hide();
$("#holdingBox2").on("click",function(){
    $(this).toggleClass("hover");
    $(".flyout2").slideToggle();
    $(".flyout1").hide();
}); });

The slideToggle stuff on my hidden layers works great, adding other functions just seems to break it :/

Here is the CSS "hover" I am trying to apply

.hover { border:1px solid red; }

Any ideas on how i have monumentally c*cked this up would be greatly appreciated, as I just can't see what I am doing wrong :/

Upvotes: 0

Views: 1127

Answers (1)

Andrew
Andrew

Reputation: 1880

I tided up your jquery a little bit: jsfiddle

But it looks like your code is working. Unless there is something that you have not mentioned

Jquery:

$(document).ready(function() {
$("#holdingBox1").on("click",function(){
    $(this).toggleClass("hover");
    $(".flyout1").slideToggle();
    $(".flyout2").hide();
});

$("#holdingBox2").on("click",function(){
    $(this).toggleClass("hover");
    $(".flyout2").slideToggle();
    $(".flyout1").hide();
}); });

CSS

.hover { border:1px solid red; }
.flyout1{display:none;}
.flyout2{display:none;}

Upvotes: 1

Related Questions