Only keep relevant div toggled

[Boy_Wonder]

So for ease this is my full code
HTML
<div class="content canon-listing">
   <img src="https://cdnw.nickpic.host/oc7ecp.png" class="canon" id="noct-img"><img src="https://cdnw.nickpic.host/oc7k1Y.png" class="canon" id="ignis-img"><img src="https://cdnw.nickpic.host/oc7VvX.png" class="canon" id="prompto-img"><img src="https://cdnw.nickpic.host/oc7PFG.png" class="canon" id="gladiolus-img"><img src="https://cdnw.nickpic.host/oc708f.png" class="canon" id="lunafreya-img"><img src="https://cdnw.nickpic.host/oc72y6.png" class="canon" id="aranae-img"><img src="https://cdnw.nickpic.host/oc7JLA.png" class="canon" id="dave-img"><img src="https://cdnw.nickpic.host/oc7fOb.png" class="canon" id="cor-img">
   <div class="section noct" id="noct"><p class="title is-4">Noctis</p>
       Text
   </div>
       <div class="section ignis" id="ignis"><p class="title is-4">Ignis</p>
       Text
   </div>
       <div class="section gladiolus" id="gladiolus"><p class="title is-4">Gladiolus</p>
       Text
   </div>
       <div class="section prompto" id="prompto"><p class="title is-4">Prompto</p>
       Text
   </div>
       <div class="section lunafreya" id="lunafreya"><p class="title is-4">Lunafreya</p>
       Text
   </div>
       <div class="section aranae" id="aranae"><p class="title is-4">Aranae Highwind</p>
       Text
   </div>
    <div class="section aranae" id="dave"><p class="title is-4">Dave</p>
       Text
   </div>
    <div class="section aranae" id="cor"><p class="title is-4">Cor Leonis</p>
       Text
   </div>
</div>

CSS (will relocate to style sheet proper once finished)
[code
<style>
.canon-listing {margin: auto; width: 95%;}
.canon {border: 5px solid #FFFFFF; max-width: 190px; width: 100%;}
.canon.active {border-bottom: 10px solid #D8E988;}
.section.ignis, .section.noct, .section.gladiolus, .section.prompto, .section.lunafreya, .section.aranae {background-image: url(https://cdnw.nickpic.host/oj4lnq.png); background-repeat: no-repeat; background-position: bottom center; padding: 5px; text-align: justify; padding-bottom: 10px; display: none;}
.section.active {display: block;}
</style>
[/b][/code]
Javascript
<script>
   $(document).ready(function(){
     $( "#noct-img" ).click(function() {
           $( "#noct" ).toggle( "slow", function() {
                         $(this).addClass("active");
  });
     });
        $( "#ignis-img" ).click(function() {
           $( "#ignis" ).toggle( "slow", function() {
                         $(this).addClass("active");
  });
     });
       $( "#gladiolus-img" ).click(function() {
           $( "#gladiolus" ).toggle( "slow", function() {
                         $(this).addClass("active");
  });
     });
       $( "#prompto-img" ).click(function() {
           $( "#prompto" ).toggle( "slow", function() {
                         $(this).addClass("active");
  });
     });
       $( "#aranae-img" ).click(function() {
           $( "#aranae" ).toggle( "slow", function() {
                         $(this).addClass("active");
  });
     });
       $( "#lunafreya-img" ).click(function() {
           $( "#lunafreya" ).toggle( "slow", function() {
                         $(this).addClass("active");
  });
     });
   });
</script>

So two questions - first of all I need to make it so that whichever image (and thereby which div shows) de-toggles the others.
Also is there any way of shortening the code down rather then having to specify for each image which div to select given I followed a naming convention

Page:
sehnsucht.boards.net/page/canon-characters

[Tumbleweed]

This is how I'd do it: (css, html and jquery is all together and didn't include all your css)



<style>
.canon-listing{margin: auto; width: 95%;}
.canons img{float:left;border: 5px solid #FFFFFF; max-width: 190px;}
.info{background-image: url(https://cdnw.nickpic.host/oj4lnq.png);
background-repeat: no-repeat;background-position: bottom center;
padding: 5px; text-align: justify; padding-bottom: 10px;}
</style>



<div class="canon-listing">
<center>
<ul class="canons">
<li><img src="https://cdnw.nickpic.host/oc7ecp.png" id="noct-img"></li>
<li><img src="https://cdnw.nickpic.host/oc7k1Y.png" id="ignis-img"></li>
<li><img src="https://cdnw.nickpic.host/oc7VvX.png" id="prompto-img"></li>
<li><img src="https://cdnw.nickpic.host/oc7PFG.png" id="gladiolus-img"></li>
<li><img src="https://cdnw.nickpic.host/oc708f.png" id="lunafreya-img"></li>
<li><img src="https://cdnw.nickpic.host/oc72y6.png" id="aranae-img"></li>
<li><img src="https://cdnw.nickpic.host/oc7JLA.png" id="dave-img"></li>
<li><img src="https://cdnw.nickpic.host/oc7fOb.png" id="cor-img"></li>
</ul>
   </center>
   <p style="clear:left;"></p>        
       <div class="info">
<div class="section noct" id="noct"><p class="title is-4">Noctis</p>Text</div>
<div class="section ignis" id="ignis"><p class="title is-4">Ignis</p>Text</div>
<div class="section gladiolus" id="gladiolus"><p class="title is-4">Gladiolus</p>Text</div>
<div class="section prompto" id="prompto"><p class="title is-4">Prompto</p>Text</div>
<div class="section lunafreya" id="lunafreya"><p class="title is-4">Lunafreya</p>Text</div>
<div class="section aranae" id="aranae"><p class="title is-4">Aranae Highwind</p>Text</div>
<div class="section aranae" id="dave"><p class="title is-4">Dave</p>Text</div>
<div class="section aranae" id="cor"><p class="title is-4">Cor Leonis</p>Text</div>
       </div>

</div>

<script>
    $(function() {

   $("ul.canons").tabs("div.info > div");
});    
</script>

And actually, If it wasn't needed for other styling purposes, the id in the images could be removed as well as classes/ids in the content part.

[Boy_Wonder]

Thank you!

[Tumbleweed]

Nov 1, 2017 5:48:02 GMT -8 Boy_Wonder said:

Thank you!

You're welcome.