Question

Hey its really hard to define an exact title for my problem.

I am using jQuery Accordions in my side with the years between 2008 and 2012. Inside these accordions are dates with a hyperlink. If you press any link an ajax get call will follow and append the result into a div container.

If I click the next link the previous one fade out and new div fade in.

Everything works like a charm excpect if I change between 2012 and 2011. Then my last opened div container in 2012 wont fade out.

This is my JS Code:

var tempDiv = '';
//Auswahl Jahr zum Anzeigen von Presseartikeln
$("#select_media").live("click", function() {
    var currentPos = $(this).data("pos");
    var currentDiv = $(this).data("div");

    alert(tempDiv);
    $("#" + tempDiv).fadeOut();
    tempDiv = currentDiv;

    $.ajax({
        url: 'edit.php?action=media_select&pos=' + currentPos,
        type: 'GET',
        dataType: 'html',
        success: function (select) {
            $("#" + currentDiv).html(select);
            $('#myGallery').galleryView();
            $("#" + currentDiv).fadeIn();
        }
    });
    return false;
});

The source Code of media_select is not important all you need to know is that there is an unordered list full of images as response.

This is my Accordion Code:

$date = getdate();
        $year = $date['year'];

        for ($i=$year; $i>=2008; $i--) {
            $getID = array();
            $getDate = array();
            $getTitle = array();
            $string = array();

            echo '<h3><a href="#" class="media_year_click">'.$i.'</a></h3>
            <div>';
            $sql = "SELECT 
                        ID,
                        DATE_FORMAT(Date, '%d.%m.%Y') AS Date_media,
                        Title
                    FROM 
                        Media
                    WHERE
                        YEAR(Date) = '".mysqli_real_escape_string($db, $i)."'
                    ORDER BY 
                        Date ASC
                    ";

            if (!$result = $db->query($sql)) {
                echo 'Datenbankfehler\n';
                echo $db->error;
            }

            $j = 0;
            while ($row = $result->fetch_assoc()) {
                $getID[$j] = $row['ID'];
                $getDate[$j] = $row['Date_media'];
                $getTitle[$j] = $row['Title'];
                $j++;
            }

            $result->close();

            //Ausgabe
            if (count($getID) == '0') {
                echo 'Kein Eintrag vorhanden';
            } else {
                echo '<ul id="media_no_point">';
                for($k = 0; $k < count($getID); $k++) {
                    $unique_id = '';
                    $string = explode(".", $getDate[$k]);
                    //Fix wenn Datum Tag 0 am Anfang enthält (wird nicht korrekt an JS übergeben)
                    //05032012 = 5032012 in JS
                    if ($string[0] < 10) {
                        $string[0] = mb_substr($string[0], 1);
                        $unique_id .= $string[0];
                    } else $unique_id .= $string[0];
                    $unique_id .= $string[1];
                    $unique_id .= $string[2];
                    echo '<li><a href="#" data-pos="'.$getID[$k].'" data-div="'.$unique_id.'" id="select_media">'.$getDate[$k].' - '.$getTitle[$k].'</a>
                        <div id="'.$unique_id.'" class="pictures"></div></li>';
                }
                echo '</ul>';
            }
            echo '</div>';
        }

If you dont know what I mean visit my site and click one link in year 2012 and then go to 2011 click the link and go back to 2012. There should be no image gallery.
Inserted alert() to show which div id is set as temp and its showing up the correct id. But the fade out is not working in closed accordion tab.

Edit: So it seems like I cant take any changes of the content in closed Accordion tabs

Answer 1

Fixed this issue. Added following code:

$("#media_accordion").accordion({
    autoHeight: false,
    navigation: true,
    //Everytime a new tab is clicked hide previous div container    
    change: function(event, ui) {
        $("#" + tempDiv).hide();
    }
});