Click on the images to show their corresponding Div in jquery

Question

I'm Having 6 different images and each image having their corresponding "Div's". While I'm click on the image all the 6 images need to hide and need to show the corresponding div of the image.

for example if I click image 4 the Div 4 need to display. and rest of the thinks need to be hide.

$(document).ready(function(e) {
  $("#mainContainer .demoImage").click(function(event) {
    $("#mainContainer").hide(1000);
    $("#detailProject +").show(1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<section>
  <div id="mainContainer">
    <div class="demo">
      <a href="javascript:void(0);" class="project1">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project2">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project3">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project4">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project5">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project6">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
  </div>
  <div id="detailProject1" style="display: none;">
    <h2>Project 1</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject2" style="display: none;">
    <h2>Project 2</h2>
    <p>Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
      passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject3" style="display: none;">
    <h2>Project 3</h2>
    <p>Printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
      but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.</p>
  </div>
  <div id="detailProject4" style="display: none;">
    <h2>Project 4</h2>
    <p>Took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  </div>
  <div id="detailProject5" style="display: none;">
    <h2>Project 5</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  <div id="detailProject6" style="display: none;">
    <h2>Project 6</h2>
    <p>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</section>

Fiddle

Answer 1

You can use jQuery .data() for create relation on both element. check updated snippet below..

$(document).ready(function(e) {
  $("#mainContainer .demoImage").click(function(event) {
    $("#mainContainer").hide();
    var elemId = "#" + $(this).data('id');
    $(elemId).show();
  });
  $('.close').click(function() {
    $(this).parent().hide();
    $("#mainContainer").show();

  })
});

.demo {
  display: inline-block;
  margin: 1%;
  width: 30%;
}

img {
  max-width: 100%;
}

.close {
  float: right;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div id="mainContainer">
    <div class="demo">
      <a href="javascript:void(0);" class="project1">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject1">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project2">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject2">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project3">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject3">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project4">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject4">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project5">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject5">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project6">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject6">
      </a>
    </div>
  </div>
  <div id="detailProject1" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 1</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject2" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 2</h2>
    <p>Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
      passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject3" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 3</h2>
    <p>Printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
      but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.</p>
  </div>
  <div id="detailProject4" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 4</h2>
    <p>Took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  </div>
  <div id="detailProject5" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 5</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  <div id="detailProject6" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 6</h2>
    <p>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</section>

Answer 2

You are hiding the container completely. You have to hide the images and show the clicked one.

 $(document).ready(function(e){
        $("#mainContainer .demoImage").click(function(event){
        $(".demoImage").hide(1000);    
   $("#detailProject"+$(this).parent().attr("class").match(/\d/g)).show(1000);
      });
    });

https://jsfiddle.net/Lm6qwzxv/2/

$(document).ready(function(e){
    	$("#mainContainer .demoImage").click(function(event){
      	$(".demoImage").hide(1000);           $("#detailProject"+$(this).parent().attr("class").match(/\d/g)).show(1000);
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div id="mainContainer">
    <div class="demo">
      <a href="javascript:void(0);" class="project1">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project2">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project3">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project4">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project5">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project6">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
  </div>
  <div id="detailProject1" style="display: none;">
    <h2>Project 1</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject2" style="display: none;">
    <h2>Project 2</h2>
    <p>Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject3" style="display: none;">
    <h2>Project 3</h2>
    <p>Printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.</p>
  </div>
  <div id="detailProject4" style="display: none;">
    <h2>Project 4</h2>
    <p>Took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  </div>
  <div id="detailProject5" style="display: none;">
    <h2>Project 5</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  <div id="detailProject6" style="display: none;">
    <h2>Project 6</h2>
    <p>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</section>

Answer 3

Get the class value when you click a image, concat the value #project with that class value of clicked element and then use it as selector:

$(document).ready(function(e) {
    $("#mainContainer .demoImage").click(function(event) {
        $("#mainContainer").hide(1000);
        var val = "#detail" + $(this).closest("a").attr("class")
        $(val).show(1000);
    });
});

.demo {
  display: inline-block;
  margin: 1%;
  width: 30%;
}
img {
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div id="mainContainer">
    <div class="demo">
      <a href="javascript:void(0);" class="Project1">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="Project2">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="Project3">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="Project4">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="Project5">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="Project6">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
  </div>
  <div id="detailProject1" style="display: none;">
    <h2>Project 1</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject2" style="display: none;">
    <h2>Project 2</h2>
    <p>Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject3" style="display: none;">
    <h2>Project 3</h2>
    <p>Printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.</p>
  </div>
  <div id="detailProject4" style="display: none;">
    <h2>Project 4</h2>
    <p>Took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  </div>
  <div id="detailProject5" style="display: none;">
    <h2>Project 5</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  <div id="detailProject6" style="display: none;">
    <h2>Project 6</h2>
    <p>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</section>

Note: you have to changes class names from project to Project

Answer 4

See updated jsfiddle: https://jsfiddle.net/sc32a4bg/1/

I changed each link to be Xproject then in jquery used

$("#detailProject" + $(this).parent().attr("class").substring(0, 1)).show(1000);

Full Updated Code

HTML:

<section>
  <div id="mainContainer">
    <div class="demo">
      <a href="javascript:void(0);" class="1project">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="2project">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="3project">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="4project">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="5project">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="6project">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
  </div>
  <div id="detailProject1" style="display: none;">
    <h2>Project 1</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject2" style="display: none;">
    <h2>Project 2</h2>
    <p>Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject3" style="display: none;">
    <h2>Project 3</h2>
    <p>Printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.</p>
  </div>
  <div id="detailProject4" style="display: none;">
    <h2>Project 4</h2>
    <p>Took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  </div>
  <div id="detailProject5" style="display: none;">
    <h2>Project 5</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  <div id="detailProject6" style="display: none;">
    <h2>Project 6</h2>
    <p>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</section>

JS:

$(document).ready(function(e){
    $("#mainContainer .demoImage").click(function(event){
    $("#mainContainer").hide(1000);
    $("#detailProject" + $(this).parent().attr("class").substring(0, 1)).show(1000);
  });
});