Toggling скрытые дивы - мой скрипт работает, но там должен быть лучше/уборщик способ

Question

Это то, что я пытаюсь сделать: http://codepen.io/shewter/pen/pRKbJZ

Это в основном работает, но у меня есть 2 проблемы:

1. Я бы хотел, чтобы любые видимые divs автоматически спрятались, если нажимается другое.
2. Я уверен, что есть намного лучший подход к написанию/сжатию Javascript, чем у меня здесь. Мысли?

$(".slidingDiv.info1").hide(); 
 
$(".slidingDiv.info2").hide(); 
 
$(".slidingDiv.info3").hide(); 
 
$(".slidingDiv.info4").hide(); 
 
$(".slidingDiv.info5").hide(); 
 
$(".slidingDiv.info6").hide(); 
 
$(".slidingDiv.info7").hide(); 
 
$(".slidingDiv.info8").hide(); 
 

 
$(".show_hide.info1").show(); 
 
$(".show_hide.info2").show(); 
 
$(".show_hide.info3").show(); 
 
$(".show_hide.info4").show(); 
 
$(".show_hide.info5").show(); 
 
$(".show_hide.info6").show(); 
 
$(".show_hide.info7").show(); 
 
$(".show_hide.info8").show(); 
 

 
$('.show_hide.info1').click(function() { 
 
$(".slidingDiv.info1").toggle("slide"); 
 
}); 
 

 
$('.show_hide.info2').click(function() { 
 
$(".slidingDiv.info2").toggle("slide"); 
 
}); 
 

 
$('.show_hide.info3').click(function() { 
 
$(".slidingDiv.info3").toggle("slide"); 
 
}); 
 

 
$('.show_hide.info4').click(function() { 
 
$(".slidingDiv.info4").toggle("slide"); 
 
}); 
 

 
$('.show_hide.info5').click(function() { 
 
$(".slidingDiv.info5").toggle("slide"); 
 
}); 
 

 
$('.show_hide.info6').click(function() { 
 
$(".slidingDiv.info6").toggle("slide"); 
 
}); 
 

 
$('.show_hide.info7').click(function() { 
 
$(".slidingDiv.info7").toggle("slide"); 
 
}); 
 

 
$('.show_hide.info8').click(function() { 
 
$(".slidingDiv.info8").toggle("slide"); 
 
});

.box {float: left; width: 25%; height: auto;} 
 
\t .slidingDiv {text-align: left; font: 14px/24px arial; color: #222; background-color: #fff; padding:20px; margin-top:10px; width: 33%; height:80%; position: absolute; z-index: 160; top: 20px; right: 20px; -webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2); box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);} 
 
\t .show_hide {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="show_hide info1"><img src="http://placehold.it/440x400/ffffff/000000?text=BOX+1" alt="" class="box"></a> 
 
<a href="#" class="show_hide info2"><img src="http://placehold.it/440x400/eeeeee/000000?text=BOX+2" alt="" class="box"></a> 
 
<a href="#" class="show_hide info3"><img src="http://placehold.it/440x400/dddddd/000000?text=BOX+3" alt="" class="box"></a> 
 
<a href="#" class="show_hide info4"><img src="http://placehold.it/440x400/cccccc/000000?text=BOX+4" alt="" class="box"></a> 
 
<a href="#" class="show_hide info5"><img src="http://placehold.it/440x400/aaaaaa/ffffff?text=BOX+5" alt="" class="box"></a> 
 
<a href="#" class="show_hide info6"><img src="http://placehold.it/440x400/999999/ffffff?text=BOX+6" alt="" class="box"></a> 
 
<a href="#" class="show_hide info7"><img src="http://placehold.it/440x400/666666/ffffff?text=BOX+7" alt="" class="box"></a> 
 
<a href="#" class="show_hide info8"><img src="http://placehold.it/440x400/333333/ffffff?text=BOX+8" alt="" class="box"></a> 
 

 
<div class="slidingDiv info1"> 
 
    <p>Info 1</p> 
 
    <p><a href="#" class="show_hide info1">Close</a></p> 
 
</div> 
 
<div class="slidingDiv info2"> 
 
    <p>Info 2</p> 
 
    <p><a href="#" class="show_hide info2">Close</a></p> 
 
</div> 
 
<div class="slidingDiv info3"> 
 
    <p>Info 3</p> 
 
    <p><a href="#" class="show_hide info3">Close</a></p> 
 
</div> 
 
<div class="slidingDiv info4"> 
 
    <p>Info 4</p> 
 
    <p><a href="#" class="show_hide info4">Close</a></p> 
 
</div> 
 
<div class="slidingDiv info5"> 
 
    <p>Info 5</p> 
 
    <p><a href="#" class="show_hide info5">Close</a></p> 
 
</div> 
 
<div class="slidingDiv info6"> 
 
    <p>Info 6</p> 
 
    <p><a href="#" class="show_hide info6">Close</a></p> 
 
</div> 
 
<div class="slidingDiv info7"> 
 
    <p>Info 7</p> 
 
    <p><a href="#" class="show_hide info7">Close</a></p> 
 
</div> 
 
<div class="slidingDiv info8"> 
 
    <p>Info 8</p> 
 
    <p><a href="#" class="show_hide info8">Close</a></p> 
 
</div>

Answer 1

Вы можете упростить код для этого:.

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

function toggleSlidingDiv() { 
    var infoclass = $(this).attr('class').match(/\binfo\d+\b/); 
    $(".slidingDiv."+infoclass).toggle("slide") 
           .siblings(".slidingDiv") 
           .hide("slide"); 
} 

Fixed Codepen