CODEWITHSUNDEEP
javascripthtml
sharataka
sharataka

Reputation: 5132

How to display and hide specific divs using javascript?

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>

Upvotes: 2

Views: 123

Answers (5)

guest271314
guest271314

Reputation: 1

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>

Upvotes: 0

Naresh S
Naresh S

Reputation: 359

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";
}

Upvotes: 0

yuriy636
yuriy636

Reputation: 11661

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.

Upvotes: 2

sbrbot
sbrbot

Reputation: 6447

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>

Upvotes: 0

Nihar Sarkar
Nihar Sarkar

Reputation: 1299

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>

Upvotes: 0

Related Questions