CODEWITHSUNDEEP
jqueryimage
thenetwork
thenetwork

Reputation: 23

Hide/show div difficulties getting image to display properly

I have sort of weird situation and I am not sure why it is not working.

I have a hide/show div FAQ section on my website using jQuery.

I got everything to be all lined up and everything works great except this one problem.

This is what my faq section looks like. The plus arrow is really an image of a minus sign with a plus sign underneath it as shown in the first picture of the imageshack album: (sorry for the link, my reputation wasn't high enough to post images)

Imageshack album (4 images)

I resized the image using css to only show the plus portion of the image as shown in the second image of the album.

When you click the plus sign, It shows the minus portion of the image and shows the hidden div(the answer) as seen in the 3rd image of the album:

The X in the bottom right corner closes the div ( a href="#" )

The problem is when you click the X, it closes the div but the minus sign does not change back into a plus sign as seen in the fourth image of the album.

But when you close the question using the "-" sign, it turns pack into a plus sign which I want.

So basically, I need the "-" sign to turn back into the "+" sign when you click the "X" in the bottom right corner.

The jQuery script I am using is:

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

$('.faq-row-head a').click(function() {
        $(this).parent().toggleClass('opened');
        $(this).parents('.faq-row').find('.faq-row-entry').slideToggle();
        return false;
    });

    $('.faq-close').click(function() {
        $(this).parents('.faq-row').find('.opened').removeClass('opened');
        $(this).parents('.faq-row').find('.faq-row-entry').slideUp();
        return false;
    });
});

</script>

The Html is for the image is:

<div class="faq-entry"><div class="faq-row">
    <div class="faq-row-head">
        <h5 class="opened"><a href="#"><span></span> Is your service for me?</a></h5>
    </div>

Updated from comment

<div id="faq">
    <div class="faq-entry">
        <div class="faq-row">
            <div class="faq-row-head">
                <h5 class="opened"><a href="#"><span></span> Question-Title</a></h5>
            </div>
            <div class="faq-row-entry" style="display: none;">
                <p>Answer Description</p>
                <div class="faq-row-entry-buttons">
                    <a class="left" href="/contact-us">Support</a>
                    <a class="right" href="/order">Get Started Now</a>
                    <img class="faq-close" src="/wp-content/uploads/2011/03/exit.png" height="32" width"32"/>
                </div>
            </div>
        </div>
    </div>
</div>

And the CSS is:

.faq-row-head h5 span, .faq-row-head2 h5 span {
    background: url("/wp-content/uploads/2011/03/faqbuttons.png") no-repeat scroll 0 0 transparent;
    height: 21px;
    left: -28px;
    position: absolute;
    top: -2px;
    width: 21px;
}
.faq-row-head .opened span {
    background-position: 0 -21px !important;
}
.faq-row-head2 h5 span {
    left: -25px !important;
    top: -1px !important;

I could change the image I use for the plus/minus signs and put the plus sign on top and the minus sign on the bottom but then the minus sign would show on my website when the question is closed. So I would need to resize it to show the plus sign of the image but I am not sure how I would do that. If anyone could please help me out, that would be much appreciated. Thanks in advance

Upvotes: 2

Views: 739

Answers (2)

hunter
hunter

Reputation: 63512

Quick fix could be:

$('.faq-close').click(function() {
    $(this).closest('.faq-row').find('.faq-row-head a').click();
});

This will trigger your $('.faq-row-head a').click event

Upvotes: 1

Brandon
Brandon

Reputation: 39182

First, use closest() instead of parents(). It is more appropriate here since you just want to walk up to the first matching parent, instead of getting the entire ancestry.

Second, you have your logic of "opened" vs "closed" backwards.

When it has a class of "opened", you are showing the + sign and have the Answer hidden. This is really the "closed" state.

When you click on it to toggle it, you remove the "opened" class (showing the - sign) and show the Answer. This is really the "opened" state. Now, when you click the faq-close image, you try to find the +/- sign with an "opened" class, but you've removed the "opened" class so it can't be found.

I'd changed all your "opened" css classes to "closed" for correctness. And then I'd add an "opened" css class. Whenever you toggleClass("opened"), also toggleClass("closed").

Then your faq-closed click handler can do:

$(this).closest('.faq-row').find('.opened').toggleClass('opened').toggleClass('closed');

Upvotes: 1

Related Questions