Member Avatar for Violet_82

Hi all, I wonder if somebody can help me with this. I have this situation:
I have a header div with a heading and when I click on it another div hiddenDiv slides down or slides up (I am using the slideToggle method). What I want to do also is to change the background image on the header div, depending on whether the hiddenDiv is collapsed or not. Let's have a look at the code:

HTML

<div class="wrapper">
    <div class="header"></div>
    <div class="hiddenDiv">
        <p>I am displayed/hidden when user clicks on header</p>
    </div>   
</div>

SCRIPT

$(document).ready(function(){
    $(".header").click(function(){
        $(this).siblings("hiddenDiv").slideToggle("fast");
    });
});

Assuming the header div needs to have a "+" background image when the hidden div is collapsed and a "-" when it is open, what would be the best ay to implement this with the slideToggle method?
I was thinking - but I am open to suggestions of course - to have two more classes:

.plus{
    background: #fffff url("plusSign.jgp") no-repeat 100% 0;
}
.minus{
    background: #fffff url("minusSign.jgp") no-repeat 100% 0;
}

and then add them in the script like this:

$(document).ready(function(){
    $(".header").click(function(){
        var $thisHiddenDiv = $(this).siblings("hiddenDiv")
        $thisHiddenDiv.slideToggle("fast");
        if($thisHiddenDiv:visible){
            $(this).removeClass("plus").addClass("minus");
        }
        else{
            $(this).removeClass("minus").addClass("plus");
        }
    });
});

Would that work? Unfortunately I don't have any code to try it on right now, the above is just a demonstration.
cheers

  • 2 Contributors
  • 2 Replies
  • 458 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for JorgeM

Not sure if your code will work as its written. I think you have the general idea though.

here is a simple example you can work off of.

<!DOCTYPE html>
<html>
<head>

 <style>
  .header {border:1px solid black;height:1em;font-size:5em;}
  .hiddenDivp {display:none;}
 </style>

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

</head>
<body>
    <div class="header">-</div>
    <div class="hiddenDiv">
        <p>I am displayed/hidden when user clicks on header</p>
    </div>   
<script>
$(document).ready(function(){
    $(".header").click(function(){
        var hd = $(".hiddenDiv");

        if(hd.is(":visible") ){
            $(this).text("+");
        }
        else{
            $(this).text("-");
        }
        hd.slideToggle("fast");

    });
});
</script>
</body>
</html>
Member Avatar for Violet_82

cool thanks, it's interesting the usage of (":visible") and (:hidden). I would have used something like .css("display") to gauge whether the div in question is either block or none, and I did and found it that it doesn't work. The reason is fairly obvious: if I click on the header when the hiddenContent is visible .css("display") will still return "block" because when I clicked on the header the content will still be visible if that makes sense. So I take (":visible") and (":hidden")work in a different way?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.