Elemente ausblenden, wenn eine anklickbare Veranstaltung zu einem bestimmten ID tritt zwischen mehrfachen

Question

HTML EDIT

<div class="form-group col-md-12"> 
<input class="img1" type="image" style="width:60px;height:60px" 

src="../images/molar_left_t.png" id="oone" name="one" alt="button"/><div id="div_one" class="collapse">3rd Molar: <?php echo $resTeeth['one'] ?></div> 
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="otwo" name="two" alt="button"/><div id="div_two" class="collapse"><?php echo $resTeeth['two'] ?></div> 
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="othree" name="three" alt="button"/><div id="div_three" class="collapse"><?php echo $resTeeth['three'] ?></div> 
<input class="img1" type="image" style="width:60px;height:60px" src="../images/bicuspid_2_left_t.png" id="ofour" name="four" alt="button"/><div id="div_four" class="collapse"><?php echo $resTeeth['four'] ?></div> 
<input class="img1" type="image" style="width:60px;height:60px" src="../images/bicuspid_1_left_t.png" id="ofive" name="five" alt="button"/><div id="div_five" class="collapse"><?php echo $resTeeth['five'] ?></div> 

Ich habe dieses Skript, das mir ein div zu kollabieren hilft, dass es nach dem Anklicken Bild ist:

$(document).ready(function() 
{ 
    $("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() 
    { 
    $(this).css('border', "solid 2px red"); 
    $(this).next().slideToggle(); 
    }); 
}); 

Jetzt muss ich alle anderen unclicked Bilder verstecken. Dh: wenn ich auf den Knopf mit der ID #oone geklickt haben, wird das nächste Element wird slideToggle(), ich brauche die anderen verborgen zu bleiben, bis ich auf dem gleichen Element klicken zum Einsturz, so werden sie sichtbar sein wieder

Answer 1

Sie siblings() verwenden können

$(this).siblings().slideToggle(); 

Answer 2

Verwenden .siblings() die Elemente zu finden, die unter dem gleichen Elternteil kommt.

Working Demo

$(document).ready(function() { 
 
    $(".img1").click(function() { 
 
    var curElem = $(this) 
 
    if (!$(this).hasClass('hidden')) { 
 

 
     $(this).addClass('hidden'); 
 
     $(this).next().slideToggle() 
 
     $(this).siblings().hide(); 
 
    } else { 
 
     $(this).removeClass('hidden'); 
 
     $(this).next().slideToggle() 
 
     $(this).siblings().show(); 
 
    } 
 
    }); 
 

 
});

.hidden { 
 
    border: solid 2px red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group col-md-12"> 
 
    <input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button" /> 
 
    <div id="div_one" class="collapse">3rd Molar: 
 
    <?php echo $resTeeth[ 'one'] ?> 
 
    </div> 
 
    <input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="otwo" name="two" alt="button" /> 
 
    <div id="div_two" class="collapse"> 
 
    <?php echo $resTeeth[ 'two'] ?> 
 
    </div> 
 
    <input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="othree" name="three" alt="button" /> 
 
    <div id="div_three" class="collapse"> 
 
    <?php echo $resTeeth[ 'three'] ?> 
 
    </div> 
 
    <input class="img1" type="image" style="width:60px;height:60px" src="../images/bicuspid_2_left_t.png" id="ofour" name="four" alt="button" /> 
 
    <div id="div_four" class="collapse"> 
 
    <?php echo $resTeeth[ 'four'] ?> 
 
    </div> 
 
    <input class="img1" type="image" style="width:60px;height:60px" src="../images/bicuspid_1_left_t.png" id="ofive" name="five" alt="button" /> 
 
    <div id="div_five" class="collapse"> 
 
    <?php echo $resTeeth[ 'five'] ?> 
 
    </div> 
 

 
    <!--31 one more similar input images--> 
 

 
</div>

Answer 3

ich denke, das könnte man hier einen Anfang geben:

$(document).ready(function() { 
$('.form-group').on('click','.img1',function() { 
    $(this).css('border', "solid 2px red"); 
    $(this).next('.collapse').slideToggle(); 
    $(this).siblings('.img1').toggle(); 
    }); 
}); 

EDIT: Hinweis Änderung .toggle() zu .slideToggle() wenn Sie es wünschen Das Wirkung überall.

Nicht 100% sicher auf den anderen Divs, was Sie benötigen, aber für die Bilder sollten funktionieren.

Probieren Sie es hier aus: https://jsfiddle.net/2y98yddj/

Wenn Sie auch die anderen divs ausblenden möchten Sie, dass mit hinzufügen könnte:

$(document).ready(function() { 
$('.form-group') .on('click','.img1',function() { 
    $(this).css('border', "solid 2px red"); 
    $(this).next('.collapse').slideToggle().siblings('.collapse').toggle(); 
    $(this).siblings('.img1').toggle(); 
    }); 
}); 

Hinweis als Einzeiler und auch die „andere“ Bilder fixieren border CSS dies tun:

$(document).ready(function() { 
    $('.form-group').on('click', '.img1', function() { 
    $(this).css('border', "solid 2px red") 
     .siblings('.img1').slideToggle().css('border', "none").end() 
     .siblings('.collapse').slideToggle(); 
    }); 
}); 

Wie ich schon sagte, sollte dies hier beginnen.