1

I'm using jquery toggle to hide some content, which the user can "unfold" if he/she wants to see it. Here's a jsFiddle of it:

http://jsfiddle.net/yjs2P/

using this code:

$.noConflict();
function toggleDiv(divId) {
   jQuery("#"+divId).toggle($);
}

As you can see the first element is already opened with a "close"-image (red), two other elements are "closed" with "open"-images (orange).

Now I want to achieve that if the user clicks on one of the images, all toggle-elements get closed and the click-related element gets opened. When the element is opened the image should change to the other state, so if it's closed (orange) the image should be changed to open (red) and the other way round, too.

Can anyone provide me any hints to this issue?

Cheers in advance!

4

2 回答 2

3

Ok how about this - first lets make a few changes to your html.

Lets not use id's but instead get into the mindset of referencing by class name. So for each of the content div's I added a news-content class

...
<div class="news-content" id="myContent">
...
<div class="news-content" id="myContent2">
...
<div class="news-content" id="myContent3">
...

Next lets remove the click handler from the hyperlinks href attribute (we'll add a handler in a minute with jQuery)

<a class="toggle" href="#">

Removed all your css and just made sure the news-content was hidden by default

.news-content {
    display: none;
}

jQuery

With those changes inplace, lets write a click handler for the hyperlinks so that it performs the toggle. Note: I used slideUp and slideDown instead of toggle.

Click here for the fiddle

$(document).ready(function () { 
    $('a.toggle').click(function () {

        // select out the elements for the clicked item
        var $this = $(this),
            $root = $this.closest('.news-text'),
            $content = $root.find('.news-content'),
            $toggleImage = $this.find('img');

        // collapse all items except the clicked one
        $('.news-text').each(function () {
            var $itemRoot = $(this);
            if ($itemRoot == $root) return; // ignore the current
            var $itemContent = $itemRoot.find('.news-content');
            if ($itemContent.is(':hidden')) return; // ignore hidden items

            // collapse and set img
            $itemContent.slideUp(); 
            $itemRoot.find('.toggle > img').attr('src', 'http://www.70hundert.de/images/toggle-open.jpg');
        });

        // for the current clicked item either show or hide
        if ($content.is(':visible')) {
            $content.slideUp();
            $toggleImage.attr('src', 'http://www.70hundert.de/images/toggle-open.jpg');
        } else {
            $content.slideDown();
            $toggleImage.attr('src', 'http://www.70hundert.de/images/toggle-close.jpg');
        }

        // stop postback
        return false;
    });
});

Updated - New Version of JQuery Handler

Click here for the fiddle

$('a.toggle').click(function () {

    var openImgUrl = 'http://www.70hundert.de/images/toggle-open.jpg',
        closeImgUrl = 'http://www.70hundert.de/images/toggle-close.jpg';

    var $newsItem = $(this).closest('.news-text'),
        $newsContent = $newsItem.find('.news-content'),
        isContentVisible = ($newsContent.is(':visible'));

    // slide up all shown news-items - but its expected that only one is visible at a time
    $('.news-text').find('.news-content').slideUp(function () { 
        // on animation callback change the img
        $('.news-text').find('.toggle > img').attr('src', openImgUrl);
    });

    if (!isContentVisible) { // if the new-item was hidden when clicked, then show it!
        $newsContent.slideDown(function () {
            // on animation callback change the img
            $newsItem.find('.toggle > img').attr('src', closeImgUrl);
        });
    }

    return false; // stop postback
});
于 2013-05-10T13:45:32.977 回答
1

Try this:

function toggleDiv(divId) {
    jQuery('[id^=myContent]').not("#" + divId).hide()
    jQuery("#" + divId).toggle($);
    var $img = jQuery("#" + divId).next('p').find('img');
    var src = $img.attr('src');
    $img.attr('src', (src.indexOf('close') > -1) ? src.replace('close', 'open') : src.replace('open', 'close'));
}

DEMO HERE

于 2013-05-10T12:31:27.473 回答