I am facing a challenge in streamlining this code. My goal is to hide one div while another one appears, but I can't seem to figure out how to achieve this using a for loop. I want each div to hide separately, not all at once.
Any advice would be greatly appreciated by this aspiring JavaScript programmer.
$( document ).ready(function() {
$(".hide").hide();
$("#pic0").click(function(){
$("#text0").slideToggle("fast");
$("#pic0").hide();
});
$("#text0").click(function(){
$("#pic0").slideToggle("fast");
$("#text0").hide();
});
$("#pic1").click(function(){
$("#text1").slideToggle("fast");
$("#pic1").hide();
});
$("#text1").click(function(){
$("#pic1").slideToggle("fast");
$("#text1").hide();
});
$("#pic2").click(function(){
$("#text2").slideToggle("fast");
$("#pic2").hide();
});
$("#text2").click(function(){
$("#pic2").slideToggle("fast");
$("#text2").hide();
});
});.first {
background-color: black;
height: 300px;
width: 300px;
margin: 10px;
}
.hide {
background-color: red;
height: 300px;
width: 300px;
margin: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="first" id="pic0"></div>
<div class="hide" id="text0"></div>
<div class="first" id="pic1"></div>
<div class="hide" id="text1"></div>
<div class="first" id="pic2"></div>
<div class="hide" id="text2"></div>