Make the div's opacity=1 when it is clicked using Javascript

Question

HTML-

<div class="wrap">
    <div class="floatleft">
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p >Connect with Office 365, GSuite.</p></h3>
    </div>
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p>Connect with Office 365, GSuite.</p></h3></div>
    </div>
    <div class="floatright" >
    <img class="integration" src="integrations-image.png" width="100%" height="100px">
    </div>
    <div style="clear: both;">
</div>
</div>

CSS used for the div-

.border{
  border-left:6px solid #3793EE;
  text-align: left;
  padding-left: 5%;
  }
div.JShover{
    height:50%;
    text-align: left;
    opacity:0.5;

}
.wrap {
    overflow: hidden;
    margin: auto;
    max-width: 700px;
}
.floatleft {
    float:left; 
    width: 50%;
    height: 500px;  
}

.floatright {
    float: right;
    height: 500px;
    width: 50%;
}

When the floatleft divs JShover is clicked the opacity should be 1. Otherwise it should 0.5. JavaScript used-

 <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
<script type="text/javascript">
$(".JShover").click(function() {
    this.style.opacity = 1
});
</script>

In the result the JShover divs have an opacity of 0.5 (since it is in the CSS) but when I click on it, the opacity does not change to 1. Is there any error in my code or implementation?

Very trivial question... also you have a typo at `height:100px`, use `=`. — Luka Čelebić, Oct 08 '17 at 08:53
@PredatorIWD Thanks, I corrected that. I have recently started with web design, so yes I apologize for the nature of the question. Is it that easy? Could you please help me out then :) — Yohanelly, Oct 08 '17 at 09:00
You can check out [this](https://stackoverflow.com/a/12627478) answer for multiple ways to achieve your effect. — Luka Čelebić, Oct 08 '17 at 09:01
Oops that was only here while posting the question, in my code it was closed properly. — Yohanelly, Oct 08 '17 at 09:33

Luka Čelebić · Accepted Answer · 2017-10-08T09:38:03.493

2

You can for example do it like this:

$(".JShover").click(function() {
    this.style.opacity = 1
});

Also add opacity: 0.5; to your div.JShover element in css.

Working fiddle here.

Edit:

First, be sure to have jQuery on your site either with having and linking a local copy or linking it inside your <head> like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

And second be sure to put your js code for changing opacity below the linked jQuery library, for example below or at the end of the <body> tag.

edited Oct 08 '17 at 09:38

answered Oct 08 '17 at 09:06

Luka Čelebić

1,083
11
21

I did try it, thanks. So the JS goes into the – Yohanelly Oct 08 '17 at 09:16
@Yohanelly Correct. – Luka Čelebić Oct 08 '17 at 09:17
Hi, I have done so but the text does not change its opacity when clicked. I have updated the question, if you could please have a look. – Yohanelly Oct 08 '17 at 09:29
@Yohanelly You didn't close the ` – Luka Čelebić Oct 08 '17 at 09:30
Oops that was only here while posting the question, in my code it was closed properly. Everything else seems fine, did i do something incorrect because i cant seem to find the error. – Yohanelly Oct 08 '17 at 09:35
Do I need to add this to the script other than type="text/javascript" – Yohanelly Oct 08 '17 at 09:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156198/discussion-between-yohanelly-and-predatoriwd). – Yohanelly Oct 08 '17 at 09:44

score 1 · Answer 2 · answered Oct 08 '17 at 09:16

1

Here is your html

<div class='floatleft'>
Hello..... :)
</div>

Here is your CSS

 .floatleft{
    background-color:red;
    opacity:0;
    }

Here is your JS

$('.floatleft').click(function(){
$(this).css('opacity','1')
});

Hope this helps you

answered Oct 08 '17 at 09:16

Liaqat Saeed

428
5
17

Thank you @LSKhan, I have updated my code in the question. When i click on the text, the opacity does not change to 1. Could you please help me out? – Yohanelly Oct 08 '17 at 09:30
did you get you solution from @PredatorIWD? or i help you? – Liaqat Saeed Oct 08 '17 at 13:48
Hey, I have got it. But I am still trying to figure out how to make the previously clicked div to go back to its previous opacity of 0.3 when the next div is clicked? Code- https://jsfiddle.net/71973avt/5/ – Yohanelly Oct 08 '17 at 14:24
you mean you want to make the clicked element opacity 1 and others to 0.5?rite? – Liaqat Saeed Oct 08 '17 at 14:28
Hey I got it, figured it out. Had to add $(".JShover").css('opacity', '0.2'); Do you know how to make a good looking navigation bar at the top of the webpage? I can send you a screenshot of what I'm trying to achieve if thats okay. Thank you so much for your time :) – Yohanelly Oct 08 '17 at 14:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156207/discussion-between-yohanelly-and-lskhan). – Yohanelly Oct 08 '17 at 14:32
yeah i can make it let me see your your screenshot first – Liaqat Saeed Oct 08 '17 at 14:32

Make the div's opacity=1 when it is clicked using Javascript

2 Answers2