Change css value between two styles on click of same button using javascript

Question

I have an image upon which I want to bring a text on clicking the image. I applied the css display property to none and on click I changed it to block. Now again on clicking I want to change the display to none. How can I do that?

js:-

function showTerms(data){
    document.getElementById(data).style.display = 'block';
}

html:-

<div style="display: none;" id="text1111" class="offer_text size-12">
    <div class="TC">
        <div class="condition">Terms &amp; Condition</div>
    </div>
    <p></p>
    <div><br></div>
    <div>- The coupon code is valid for one time use per user account.<br></div>
    <p></p>

iuliu.net · Accepted Answer · 2016-05-14 09:01:59Z

1

You can achieve this with a toggle function, like so:

function toggleTerms(data){
    document.getElementById(data).style.display = (document.getElementById(data).style.display == 'block' ? 'none': 'block'); 
}

answered May 14, 2016 at 9:01

iuliu.net

7,1858 gold badges52 silver badges72 bronze badges

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

10 Comments

Kshitij Pandey Over a year ago

Its not changing again to none

Kshitij Pandey Over a year ago

Actually on click the text is on the image. In your demo its above the image so I guess its not able to get the id of image

Akash Amin Over a year ago

try to change the z-index.

sinisake Over a year ago

@KshitijPandey, provide your complete HTML/CSS... Why do you need image id at all? However, code in answer must work, for sure....

Akash Amin Over a year ago

You will have to post your html css and js, you have a class "offer_text size-12." Without that no one might be able to help.

|

Niet the Dark Absol · Accepted Answer · 2016-05-14 09:02:41Z

0

Generally speaking, do not modify CSS directly in JavaScript (there are of course exceptions, but in this case you shouldn't).

Instead, define a CSS class like so:

.shown {display: block}

Then your JavaScript can be as simple as:

function showTerms(data) {
    document.getElementById(data).classList.toggle("shown");
}

_{* If support for old browsers is needed, you'll need something a little more advanced to check if the class is on and toggle it manually.}

answered May 14, 2016 at 9:02

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

2 Comments

Niet the Dark Absol Over a year ago

@KshitijPandey Ah, remove the inline display:none and put that in CSS too, otherwise it continues to override.

Kshitij Pandey Over a year ago

If I am changing the inline css the text is already appearing on the image which I want to do it by clicking the image

Collectives™ on Stack Overflow

Change css value between two styles on click of same button using javascript

2 Answers 2

10 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related