How to display and hide specific divs using javascript?

Question

I have multiple images on a page. Each image has an id associated with it. For each image, I want the user to be able to click on a heart. When the user clicks on a heart, the open heart icon should be replaced by the closed heart icon for just that image. Similarly, when a user unhearts an image, the closed heart icon should get replaced by the open heart icon.

I'm having trouble implementing this in javascript correctly. How would I reference just the icon that needs to be changed? Any advice on how to implement this?

Javascript

<script >
  function wantToGo(id) {
    console.log(id);
  }

  function dontWantToGo(id) {
    console.log(id);
  }
</script>

HTML

<div class='col-md-4'>
  <img src = "http://i.imgur.com/gwzxVWi.jpg ">
  <!-- Open heart icon -->
  <a href = "#" onClick = "wantToGo(4)"><i class="fa fa-heart-o"></i></a>
  <!-- Closed heart icon -->
  <a href = "#" onClick = "dontWantToGo(4)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;"></i></a> 
</div>

<div class='col-md-4'>
  <img src = "http://i.imgur.com/Ohk2jxC.jpg ">
  <a href = "#" onClick = "wantToGo(5)"><i class="fa fa-heart-o"></i></a>
  <a href = "#" onClick = "dontWantToGo(5)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;"></i></a> 
</div>

what are the scenarios? On click of first link, what are you hiding? what are you showing? What do the wantToGo and dontWantToGo represent? Please Elaborate. — Akshay Khandelwal
– Akshay Khandelwal, Commented Aug 14, 2016 at 17:36

yuriy636 · Accepted Answer · 2016-08-14 17:57:02Z

2

You don't need to have 2 separated divs. You can just change the class in order to "switch" the icon (FontAwesome allows you to do that).

function switchHeart(el){
	var icon = el.querySelector('.fa');//Get the i element from his parent
	var opened = 'fa-heart-o';
	var closed = 'fa-heart';

	icon.classList.toggle(opened);
	icon.classList.toggle(closed);
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" onclick="switchHeart(this)"><i class="fa fa-heart-o" style="color:red"></i></a>

this in the onclick event listener allows you to reference the element triggering the click event.
In the function, we get the i child element from the parent that triggered the event.
A pair of variables with the classes for opened/closed heart.
We toggle each class, so if the opened class is present, we remove it. The same with the closed class.

edited Aug 14, 2016 at 17:57

answered Aug 14, 2016 at 17:45

yuriy636

11.7k6 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nihar Sarkar · Accepted Answer · 2016-08-14 17:37:02Z

Try this:

Javascript :

function wantToGo(id) {

        id.nextSibling.style.visibility="true";
        id.style.visibility="false";


      }

      function dontWantToGo(id) {

        id.previousSibling.style.visibility="true";
        id.style.visibility="false";

      }

HTML:

 <div class='col-md-4'>
                <img src = "http://i.imgur.com/gwzxVWi.jpg ">

                    <!-- Open heart icon -->
                    <a href = "#" onClick = "wantToGo(this)"><i class="fa fa-heart-o"></i></a>

                    <!-- Closed heart icon -->
                    <a href = "#" onClick = "dontWantToGo(this)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;visibility:hidden;"></i></a> 



          </div>
          <div class='col-md-4'>
                <img src = "http://i.imgur.com/Ohk2jxC.jpg ">


                    <a href = "#" onClick = "wantToGo(this)"><i class="fa fa-heart-o"></i></a>


                    <a href = "#" onClick = "dontWantToGo(this)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;visibility:hidden;"></i></a> 



          </div>

sbrbot · Accepted Answer · 2016-08-14 17:43:30Z

You said that you have an id associated for each particular heart image (not show in your code). So, you will reference it by that id (using document.getElementById(2) code). The image icon you will change by changing it's (DOM element's) src (source) attribute.

<script >
function wantToGo(id)
{
  document.getElementById(id).src='openheart.png';
}

function dontWantToGo(id)
{
  document.getElementById(id).src='closedheart.png';
}
</script>

In your HTML:

<div class='col-md-4'>
  <img src="http://i.imgur.com/gwzxVWi.jpg" id="1">
  <a href = "#" onClick = "wantToGo(1)">...</a>
  <a href = "#" onClick = "dontWantToGo(1)">...</a> 
</div>
<div class='col-md-4'>
  <img src="http://i.imgur.com/gwzxVWi.jpg" id="2">
  <a href = "#" onClick = "wantToGo(2)">...</a>
  <a href = "#" onClick = "dontWantToGo(2)">...</a> 
</div>

Naresh S · Accepted Answer · 2016-08-14 18:18:15Z

few additions to your markup and script, check below:

HTML:

<div class='col-md-4'>
      <img src="http://i.imgur.com/gwzxVWi.jpg">
      <!-- Open heart icon -->
      <a href="#" onClick="wantToGo(event, 4)"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
      <!-- Closed heart icon -->
      <a href="#" onClick="dontWantToGo(event, 4)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;"></i></a>
    </div>
    <div class='col-md-4'>
      <img src="http://i.imgur.com/Ohk2jxC.jpg">
      <a href="#" onClick="wantToGo(event, 5)"><i class="fa fa-heart-o"></i></a>
      <a href="#" onClick="dontWantToGo(event, 5)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;"></i></a>
    </div>

JS:

function wantToGo(me, id) {
    me.target.className = toggleClass(me.target.className);
}
function dontWantToGo(me, id) {
    me.target.className = toggleClass(me.target.className);
}
function toggleClass(val) {
  return (val === "fa fa-heart-o") ? "fa fa-heart" : "fa fa-heart-o";
}

guest271314 · Accepted Answer · 2016-08-14 18:42:45Z

You can use html <input type="checkbox">, <label> elements; css position:absolute, z-Index, :checked, adjacent sibling selector, background, url(), :hover to set cursor to pointer

.col-md-4 {
  padding: 8px;
  margin: 8px;
  border: 8px solid transparent;
}
input[type="checkbox"] {
  width: 50px;
  height: 50px;
  position: absolute;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  opacity: 0;
  z-Index: 1;
}
input[type="checkbox"]:hover {
  cursor: pointer;
}
label {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  /* `url("/path/to/open-heart/image") */
  background: blue;
  z-Index: 0;
}
:checked + label {
  /* `url("/path/to/closed-heart/image") */
  background: red;
}

<div class="col-md-4">
  <input type="checkbox" />
  <label></label>
</div>
<br>
<div class="col-md-4">
  <input type="checkbox" />
  <label></label>
</div>

Collectives™ on Stack Overflow

How to display and hide specific divs using javascript?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related