Getting an image to appear over another div onclick with a toggle

Question

I am trying to be able to click on a specific square and get a checkmark to appear over-top of it. I am going to want it to have a toggle effect, but I wanted to try to at least get the checkmark to show, which I am really having an issue getting it to even appear.

What am I doing wrong?

 $('.package-img').click(function () { //target.innerHTML = '<img src="images/checkmark-circle.png" class="checkmark-img total-center">'; $('.package-img').prepend('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">') }); 

 .package-img { width: 60%; height: auto; opacity: 1; margin-left: 20%; cursor: pointer; transition:1s; -webkit-transition:1s; position: relative; } #calendar-wrap, #tp-wrap { width: 100%; position: relative; } .checkmark-img { width: 50%; height: 50%; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="calendar-wrap"> <h2 class="product-titles">Package 1</h2> <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img"> </div> <div id="calendar-wrap"> <h2 class="product-titles">Package 2</h2> <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img"> </div> 

Answer 1

Use before method instead of prepend , otherwise your image is being added inside another image. Also use $(this).before... otherwise your checkmark will be added to all images with class package-img

$(this).before('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')

 var $img = $('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img"/>').hide(); $('.package-img').before($img); $('.package-img').click(function () { $(this).prev().show(); }); $('.checkmark-img').click(function () { $(this).hide(); }); 

 .package-img { width: 60%; height: auto; opacity: 1; margin-left: 20%; cursor: pointer; transition:1s; -webkit-transition:1s; position: relative; } #calendar-wrap, #tp-wrap { width: 100%; position: relative; } .checkmark-img { width: 50%; height: 100%; z-index: 1; position: absolute; left: 25%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="calendar-wrap"> <h2 class="product-titles">Package 1</h2> <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img"> </div> <div id="calendar-wrap"> <h2 class="product-titles">Package 2</h2> <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img"> </div> 

Answer 2

It is understood what you are looking for. Basically you can "toggle" the checkmark image over the checkmark square image when you click on the checkmark square. The problem with this is once you put the checkmark over the square the toggle doesnt work anymore. I have come up with a solution that should work a little better.

Basically if we take advantage of the rules that when a label is selected that is bound to a <input type="checkbox" /> this will toggle the checked property of the checkbox.

We can then bind to this event in jQuery and show\\hide the checkmark. In this instance we dont bind any click events to the images, but the change event of the checkbox. Something like the example below.

Now the question is:

Why did i use a checkbox

Well by using a checkbox we can capture the result in our form posts. It also makes it easy to identify what is checked by enumerating all the check boxes that have the checked property.

To have this sent to your server you will need to add a name property to each checkbox and also set the value property.

 $('.calendar-check').on('change', function() { if ($(this).prop('checked')) $(this).parents('.calendar-wrap:first').find('.checkmark-img').show(); else $(this).parents('.calendar-wrap:first').find('.checkmark-img').hide(); }); 

 .package-img { width: 60%; height: auto; opacity: 1; margin-left: 20%; cursor: pointer; transition: 1s; -webkit-transition: 1s; position: relative; } #calendar-wrap, #tp-wrap { width: 100%; position: relative; } .checkmark-img { display: none; z-index: 1; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } .calendar-check { display: none; } .package-check-toggle { position: relative; height: 100%; width: 100%; display: block; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="calendar-wrap" class="calendar-wrap"> <h2 class="product-titles">Package 1</h2> <label for="package-check-1" class="package-check-toggle"> <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img" /> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 1" class="checkmark-img" /> </label> <input type="checkbox" class="calendar-check" id="package-check-1" /> </div> <div id="calendar-wrap" class="calendar-wrap"> <h2 class="product-titles">Package 2</h2> <label for="package-check-2" class="package-check-toggle"> <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="calendar-img" /> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 2" class="checkmark-img" /> </label> <input type="checkbox" class="calendar-check" id="package-check-2" /> </div> 

Sample JSFiddle

EDIT For completness sakes I figured best to show a CSS (3) only solution. This has no depenedcies on using jQuery at all. Again this takes into consideration a checkbox (which is value based) and toggles the checkmark based on the toggle.

The Markup is quite simple.

<div class="calendar-checkmark">
    <input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
    <label for="checkbox-1"></label>
</div>

Example:

 .calendar-checkmark input[type=checkbox] { display: none; } .calendar-checkmark label { cursor:pointer; display: block; height: 384px; width: 354px; position:relative; background: url('http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif') no-repeat center center transparent; } .calendar-checkmark label::after { content:' '; display: block; height: 100%; width: 100%; position: absolute; z-index:1; display:none; background: url('https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png') no-repeat center center transparent; } .calendar-checkmark input[type=checkbox]:checked + label::after { display: block; } 

 <div class="calendar-checkmark"> <input type="checkbox" id="checkbox-1" name="checkbox1" value="true" /> <label for="checkbox-1"></label> </div> 

The trick here is using Adjacent sibling selectors which allow you to select an adjacent sibling based of another element. So if we look at the css when the checkbox is checked it gets the Psudo-class :checked applied to it (similar to :hover etc). Then we use the adjacent + selector to locate the label .

Now the label element has a css background set to the image of the square box. Next it has the psudo-class ::after applied which creates our psudo-element that contains the checkbox. This is added after the element, when the checkbox is checked the psudo class :checked is addeed. This then changes the state of the psudo element by displaying the element.

Another Fiddle

Answer 3

This can be a lot simpler if we just remove the box images and create them via CSS. There will be less to download and we can then make the box's background transparent. This will allow us to just show and hide the checkmark that is already sitting behind each box.

 $('.package-img').click(function () { this.nextElementSibling.classList.toggle("hide"); }); 

 parent { position:relative; } .package-img { border:3px solid black; width: 110px; height:110px; background-color:rgba(0,0,0,0); margin-left: 20%; cursor: pointer; position:relative; display:inline-block; } .checkmark-img { transition:1s; width: 15%; z-index: -1; position:relative; margin-left:-15%; } img.hide { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2 class="product-titles">Package 1</h2> <div class="parent"> <div class="package-img"></div> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide"> </div> <h2 class="product-titles">Package 2</h2> <div class="parent"> <div class="package-img"></div> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide"> </div> 

Answer 4

1. absolutely position the Checkmark on top of the package image

2. Hide it

3. Use toggle to reveal it

since its hidden on top of it you will need to use the siblings selector to retrieve it

  $('.checkmark-img').hide(); $('.package-img').click(function () { $('.checkmark-img').toggle(); }); 

 .package-img { width: 60%; height: auto; opacity: 1; margin-left: 20%; cursor: pointer; transition:1s; -webkit-transition:1s; position: relative; } #calendar-wrap, #tp-wrap { width: 100%; position: relative; } .checkmark-img { width: 60%; height: auto; opacity: 1; margin-left: 25%; margin-top:10%; cursor: pointer; transition:1s; -webkit-transition:1s; position: absolute; width: 50%; height: 50%; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="calendar-wrap"> <h2 class="product-titles">Package 1</h2> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">' <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img"> </div> <div id="calendar-wrap"> <h2 class="product-titles">Package 2</h2> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">' <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img"> </div>