Using html css and js

JavaScript
1

Hello,

Scenario 1: I want to display a small description below the image, when someone clicks on an image.
Before Click:
[IMAGE]
After click:

[IMAGE]
• Description line 1
• Description line 2, etc…

Scenario 2: And i want to display two images with description, when one clicks on a image.
Before click:
[IMAGE]

After click :
[IMAGE]
Description of this image

[SUB-IMAGE 1] Description of this first sample image, in the front, when clicked

[SUB-IMAGE 2] Description of this second sample image in the front, when clicked

Would any expert be kind enough to give me the html/css/js code for this, because I’m very novice, and i shall be highly thankful to you.

Kind regards,
pj

2

Hi pj,

Easiest way is to add a hidden content as HTML and to hide/show it based on a class on a parent element.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
<style media="screen">
.image-content-trigger {
  width: 100px;
  height: 100px;
  border: 3px solid green;
}
.image-content {
  display: none;
}
.image-wrap.active .image-content {
  display: block;
}
</style>
</head>
<body>
<div class="image-wrap">
  <img class="image-content-trigger" src="..." />
  <div class="image-content">
    <p>Description</p>
  </div>
</div>
<div class="image-wrap">
  <img class="image-content-trigger" src="..." />
  <div class="image-content">
    <p>Description</p>
    <p>Description</p>
    <img src="..." />
  </div>
</div>
<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
  $(document.body).on('click', '.image-content-trigger', function(event) {
    $(event.target).closest('.image-wrap').toggleClass('active')
  })
})
</script>
</body>
</html>
1 Like
3

Hi, Mark.

Thanks so much for your response. This helps me a lot.

Best,
pj

4

Hey Mark,

i was looking to do some slight modifications myself, but i failed. would you be kind enough to help me with the below change ?

  • Currently the when one image is clicked it’s description is appearing, and when i click another image the description of previous image still is appearing. Is it possible to hide the description of other images, when a particular image is clicked ?

Thank you again for your kind help.

5

change the code to this:

$(function() {
  $(document.body).on('click', '.image-content-trigger', function(event) {
    $('.image-wrap.active').removeClass('active');
    $(event.target).closest('.image-wrap').addClass('active');
  })
})
2 Likes
6

Thanks Athena :smile:

It’s working.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.