CODEWITHSUNDEEP
jqueryhtmlcss
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to update only clicked element's style

HTML:

<div class="expHdr blueBG brClear" title="wer">
    <span><img src="theImages/arrow_right.png" id="imgType" /></span>
    wer
</div>
<div class="expCont hidContent">
    <tfText01>wer</tfText01>
</div>

<div class="expHdr blueBG brClear" title="234">
    <span><img src="theImages/arrow_right.png" id="imgType" /></span>
    234
</div>
<div class="expCont hidContent">
    <tfText02>werewr</tfText02>
</div>

JSFiddle: http://jsfiddle.net/sikni8/rz7e2a0h/1/

How can I modify the CSS/JQuery/HTML to ensure the blue header changes only for the clicked element and also the image.

Upvotes: 0

Views: 48

Answers (3)

Brijesh Bhatt
Brijesh Bhatt

Reputation: 3830

Use $header the targeted element this in your code:

$(".expHdr").click(function () {
    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        $content.is(":visible") ? $header.find("#imgType").attr('src', 'theImages/arrow_down.png') : $header.find("#imgType").attr("src", "theImages/arrow_right.png");
        $content.is(":visible") ? $header.removeClass("blueBG").addClass("orangeBG") : $header.removeClass("orangeBG").addClass("blueBG");
    });
});

Upvotes: 1

Quintile
Quintile

Reputation: 343

Change the one line in your jquery

$content.is(":visible") ? $header.removeClass("blueBG").addClass("orangeBG") : $header.removeClass("orangeBG").addClass("blueBG");

To fix the image issue, replace the line above with:

$content.is(":visible") ? $header.find('img').attr('src', 'theImages/arrow_down.png') :  $header.find('img').attr("src", "theImages/arrow_right.png");

Upvotes: 3

renakre
renakre

Reputation: 8291

You need to get the relative header by using $(this). So, try this:

  $content.is(":visible") ? 
       $(this).prev().removeClass("blueBG").addClass("orangeBG") : 
       $(this).prev().removeClass("orangeBG").addClass("blueBG");

Instead of this:

  $content.is(":visible") ? 
       $(".expHdr").removeClass("blueBG").addClass("orangeBG") : 
       $(".expHdr").removeClass("orangeBG").addClass("blueBG");

DEMO: https://jsfiddle.net/rz7e2a0h/7/

Upvotes: 1

Related Questions