I'm trying to write a code that toggles the opacity of a div but I'm running into trouble with it. If I click this button, I want it to set the opacity of #infodiv to 1.0, where it's set at 0.0 right now, like so.

#infodiv{
    width: 250px;
    height: 0px;
    margin-top: 10%;
    opacity: 0.0;
}

This is the function that I'm trying to call.

function toggles(){
    infodiv.css('opacity', '1.0');
}

It's probably the function that it's need of some tweaking, maybe? Thanks to anyone willing to take a look to help out. Here's a fiddle

I'm trying to write a code that toggles the opacity of a div but I'm running into trouble with it. If I click this button, I want it to set the opacity of #infodiv to 1.0, where it's set at 0.0 right now, like so.

#infodiv{
    width: 250px;
    height: 0px;
    margin-top: 10%;
    opacity: 0.0;
}

This is the function that I'm trying to call.

function toggles(){
    infodiv.css('opacity', '1.0');
}

It's probably the function that it's need of some tweaking, maybe? Thanks to anyone willing to take a look to help out. Here's a fiddle

• javascript
• jquery
• css

• jsfiddle/gzntu28d – Satpal Commented May 23, 2016 at 14:08

8 Answers 8

You must set style of element with jQuery:

function toggles() {
  $('#infodiv').css('opacity', '1.0');
}

If you use pure javascript, your function will be look like that

function toggles(){
   document.getElementById('infodiv').style.opacity = '1.0';
}

Use Element.classList

var infodiv = document.querySelector("#infodiv");

function clickToggle(){
   this.classList.toggle("active")
}

infodiv.addEventListener("click",clickToggle, false);

#infodiv{
width: 250px;
height: 250px;
background: red;
opacity: 1;
}
#infodiv.active{opacity: 0}

<div id=infodiv></div>

The simplest way to toggle whether something is displayed in jQuery is with .toggle()

$('#infodiv').click(function(){
   $(this).toggle();
})

if you need to change opacity then try toggleClass() and create a new CSS class that has opacity 1

// CSS

.opaque{
   opacity: 1;
}

// jQuery

$('#infodiv').click(function(){
   $(this).toggleClass('opaque');
})

$(function() {
  $('#btn').click(function() {
      $('#infodiv').toggleClass('active');
  });
});

#infodiv {
  width: 250px;
  margin-top: 10%;
  opacity: 0.0;
}
#infodiv.active {
  opacity: 1;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="infodiv">
  <div class="infotext">This is a test.</div>
</div>
<button type="button" id="btn">btn</button>

You need to use with ID selector which returns a jQuery object as the method .css() is a jQuery function

function toggles() {
  $('#infodiv').css('opacity', '1.0');
}

DEMO

However I would remend you to create a CSS class like

.higheropacity {
    opacity: 1.0 !important
}

Then use .toggleClass() method

function toggles() {
  $('#infodiv').toggleClass('higheropacity');
}

DEMO

Well, besides the jQuery one, you can always do something like

function toggles() {
   document.getElementById('infodiv').style.opacity = 1;
}

if you feel like using pure javascript.

Does it have to be a function?
Why not use:

 $('#infodiv').toggle();

From the api - "The .toggle() method animates the width, height, and opacity of the matched elements simultaneously."