当单击按钮时，显示/隐藏div将打开所有div，而不仅仅是一个

Question

I'm trying to use the show/hide on a div with buttons but it's opening all divs at once when the button is clicked here's the page i'm trying it out on http://starsQA.com/jen-lilley-interviews

here's the code:

<?php
    include("db_conn.php");
    $qry_string = "select * from questions WHERE starID = 8 && returned = 1 GROUP BY `reason` ORDER BY `edited` DESC, starID ASC, `reason`";
    $prep = $pdo_conn->prepare($qry_string);
    $prep->execute(array($starid));
    while ($row = $prep->fetch(PDO::FETCH_ASSOC)) {
        echo "<button class='show_hide' id='tglbtn{$row['reason']}'>{$row['reason']}</button>";
//        echo "<div style='clear:both;'></div>";
        echo "<div style='color:black;' class='slidingDiv' id='tgldiv{$row['reason']}'><b><u>{$row['reason']}</u></b><br><ol>";
        $qry_stringq = "select * from questions WHERE starID = 8 && returned = 1 && reason = '{$row['reason']}' ORDER BY starID ASC, `reason`";
        $prepq = $pdo_conn->prepare($qry_stringq);
        $prepq->execute(array($starid));
            echo "<ol style='margin:30px'>";
            while ($rowq = $prepq->fetch(PDO::FETCH_ASSOC)) {
                echo "<li><b>{$rowq['question']} - {$rowq['whoAsked']}</b><br>
                        {$rowq['response']}</li><br>";

            }
            echo "<ol'></div>";
        echo "<div style='clear:both;'></div>";
     }
     echo "<br><br>";
    ?>

javascript:

<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();


                    $no = $(this).attr('id').substring(6);

                    if($("#tgldiv" + $no).css("display") == "inline-block") {
                        $("#tgldiv" + $no).css("display", "none");
                        $(this).html($namearray[$no]);
                    }
                    else {
                        $("#tgldiv" + $no).css("display", "inline-block");
                        $namearray[$no] = $(this).html();
                        $(this).html("hide");
                    }
                 });   
});

</script>

css:

            .slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}

anyone got any ideas on how to fix this issue??? FIXED

also how do it stop the div's opening up while the page is loading/opening? STILL NEEDS FIXING

getting content to fix in each div would be great help too

Answer 1

That's because $(".slidingDiv") is referencing all elements with the class of slidingDiv . What you need is context. You need the nearest element to your button. It looks like all your expanding divs are neighbours of your buttons, so you could use jQuerys siblings or next for this:

$('.show_hide').click(function(){
   $(this).next('.slidingDiv').slideToggle();
});

Also, please don't put spaces into your id attributes, it will break your page.

Answer 2

$('.show_hide').click(function(){
$("this").next('.slidingDiv').slideToggle(); // need target one .slidingDiv  
});