Cannot load hidden content in div on click of image

Question

---

I'm trying to hide content until clicked on the image and load the content related to that image.

My code looks like so:

html:

<div class="projects">
    <h2>Newest Projects</h2>
    <p>Here are some of my newest works.</p>
    <div class="project-image">
        <div class="overlay">
            <p>&Design</p>
            <p>Development</p>
        </div>
        <img src="images/anddesignedit.png" data-id="design">
    </div>
    <div class="project-image">
        <div class="overlay">
            <p>Roberts Landscaping</p>
            <p>Design and Development</p>
        </div>
        <img src="images/landscapinglogo.png" data-id="landscaping">
    </div>
    <div class="project-image">
        <div class="overlay">
            <p>Cuda</p>
            <p>Development</p>
        </div>
        <img src="images/cudalogo.png" data-id="cuda">
    </div>

    <div class="clicked-content">
        <div id="design" class="hideDivs">
            <h3>&Design</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam. Donec quam ipsum, imperdiet ultricies tristique at, gravida finibus erat. Integer laoreet volutpat sagittis. Donec pretium, lacus a ullamcorper dapibus, massa neque fermentum augue, eget convallis tortor orci nec nisl</p>
        </div>

script code looks like so:

 $("img").on('click',function(){
        var hello = $(this).attr('data-id');
        $('.hideDivs').hide();
        $('#'+hello).show();
 });    

I do have a .hideDiv class in my css as display: none.

Help please!

EDITED:

So i've tried both of the ways commented so far but they don't seem to be working for me. Could it perhaps be because I have an overlay on the image? I've tried targeting the actual div element instead however, I still can't get it to load the content.

Answer 1

here I've added basic esample of what you're trying to achieve. the main issue of code you've provided was you had only one paragraph which was hidden and immediatelly shown by your code, because you referred to the same element by #design and .hideDivs

$("img").on('click', function() {
  console.log('hey ther');
  var hello = $(this).attr('data-id');
  $('.hideDivs').hide();
  $('#' + hello).show();
});

img {
  display: block;
  width: 100px;
  height: 100px;
}
.project-image {
  border: 1px solid red;
  float: left;
  margin-right: 10px;
}
.hideDivs {
  display: none;
}
.hideDivs:first-child {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="projects">
  <h2>Newest Projects</h2>
  <p>Here are some of my newest works.</p>
  <div class="project-image">
    <div class="overlay">
      <p>Design</p>
      <p>Development</p>
    </div>
    <img src="images/anddesignedit.png" data-id="design">
  </div>
  <div class="project-image">
    <div class="overlay">
      <p>Roberts Landscaping</p>
      <p>Design and Development</p>
    </div>
    <img src="images/landscapinglogo.png" data-id="landscaping">
  </div>
  <div class="project-image">
    <div class="overlay">
      <p>Cuda</p>
      <p>Development</p>
    </div>
    <img src="images/cudalogo.png" data-id="cuda">
  </div>

  <div class="clicked-content">
    <div id="design" class="hideDivs">
      <h3>Design</h3>
      <p>Design lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam.</p>
    </div>
    <div id="landscaping" class="hideDivs">
      <h3>Roberts Landscaping</h3>
      <p>Roberts lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam.</p>
    </div>
    <div id="cuda" class="hideDivs">
      <h3>Cuda</h3>
      <p>Cuda lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam.</p>
    </div>
  </div>