CODEWITHSUNDEEP
jquerycsshtmltoggle
Oam Psy
Oam Psy

Reputation: 8663

jQuery Toggle img inside a label

I think i have a simple problem.

I am trying to create a simple expand and collapse panel using .toggle.

Although the content expands and collapses as expected, i am trying to place some icons to help the user, i cannot get these images to toggle too.

HTML:

<div class="toggle_head Header">
    <label>
        <img height="30px"; src="http://png-1.findicons.com/files/icons/2338/reflection/128/expand_alt.png" />
    </label>
    <label class="hide">
        <img height="30px"; src="http://png-2.findicons.com/files/icons/2338/reflection/128/collapse_alt.png" />
    </label>
    <label>Expand</label>
</div>
<div class="toggle_body">
    <label>My content</label>
</div>

jQuery:

$(".toggle_body").hide();
$(".collapse").hide();

$(".toggle_head").click(function () {
    var $this = $(this);
    $this.next(".toggle_body").slideToggle("slow", function () {
        $this.children('img').toggle();            
    });
});

CSS:

.Header {
    background: #DADADA;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #DADADA), color-stop(100%, #DADADA));
    background-image: -webkit-linear-gradient(#DADADA, #DADADA);
    background-image: -moz-linear-gradient(#DADADA, #DADADA);
    background-image: -o-linear-gradient(#DADADA, #DADADA);
    background-image: linear-gradient(#DADADA, #DADADA);
    color: #5C5C5C;
    height: 45px;
}
.hide {
    display: none;
}

Here's my fiddle: http://jsfiddle.net/oampz/2ZP9v/3/

Any help appreciated.

Thanks

Upvotes: 0

Views: 221

Answers (2)

Shanky
Shanky

Reputation: 361

--------JQuery Code---------

<script type="text/javascript">
$(document).ready(function () {

     $(".toggle_body").hide();
    $(".collapse").hide();


    $(".toggle_head").click(function () {
        var $this = $(this);
        $this.next(".toggle_body").slideToggle("slow", function () {
            $this.find('img').toggle();
        });
    });

 });

</script>

-----------UI Code----------------

<div class="toggle_head Header">
    <label>
        <img height="30px" src="http://png-1.findicons.com/files/icons/2338/reflection/128/expand_alt.png" />
    </label>
    <label>
        <img class="hide" height="30px" src="http://png-2.findicons.com/files/icons/2338/reflection/128/collapse_alt.png" />
    </label>
    <label>Expand</label>
</div>
<div class="toggle_body">
    <label>My content</label>
</div>

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

The img are not direct descendant of .toggle_head, for this purpose use find instead:

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Code:

$(".toggle_body").hide();
$(".collapse").hide();

$(".toggle_head").click(function () {
    var $this = $(this);
    $this.next(".toggle_body").slideToggle("slow", function () {
        $this.find('img').toggle();
    });
});

Demo: http://jsfiddle.net/2ZP9v/4/

Upvotes: 2

Related Questions