Html button to hide div

Javascript: Hiding and Showing div tag with a toggle button

I’ll get right to it: What I need to do is hide a particular div with the press of a button, and it’s supposed to be a toggle, so basically: Press once to hide, press again to show, press again to hide etc. I want the hide/show rules to be done in CSS and the interaction in pure javascript (no jquery please). Well this is what I need to do, but I’m not quite sure how to execute the javascript code. html:

Show/hide 
 
I want to hide this by pressing the button above
 

http://jsfiddle.net/fyUJc/14/ Also, if you think this question doesn’t belong here or is stupid, please try to refrain from being rude, I’m just trying to learn here.

You can add and remove a class to the div to show/hide it. Excellent roundup over here: stackoverflow.com/questions/195951/…

4 Answers 4

You can make use an onclick method. Have your HTML as:

Show/hide
 
I want to hide this by pressing the button above
 

And have the following JavaScript:

function toggle_visibility(id) < var e = document.getElementById(id); if (e.style.display == 'block' || e.style.display=='') < e.style.display = 'none'; >else < e.style.display = 'block'; >> 

Here is an updated JSFiddle of your code that works with native browser methods and implement a simple toggle component — http://jsfiddle.net/fyUJc/31/

var button = document.querySelector('.button'); button.addEventListener('click', function(event) < var target = document.querySelector(button.getAttribute('data-target')); if (target.style.display == "none") < target.style.display = "block"; button.innerHTML = button.getAttribute('data-shown-text'); >else < target.style.display = "none"; button.innerHTML = button.getAttribute('data-hidden-text'); >>); 

By creating a toggle button you are entering the field of GUI and this is something very complex.

Current browser technologies doesn’t provide a rich set of tools to help you with everything you need to handle in GUIs. jQuery is of no help either, as GUIs are more about handling components and state than manipulating the DOM.

Even that the above code works in Chrome, you still need to take care of browser differences in both DOM and event and you will need a better abstraction for the components. There are quite a lot of problems that are not addressed in my code and that will be very difficult to address correctly if you write them from scratch every time. Things like:

• How you initialize newly added togglers on the page ?
• How you sync the state of the div and the button ?
• How you extend and plug into the button behavior ?

I will strongly advise that you look into UI related libraries or frameworks that provide solutions for the common problems. See ReactJS, Dojo or Sencha (ex. ExtJS) to name a few. Look for frameworks that define a Widget/Component life-cycle and ways to extend and define custom ones.

Browser technologies just don’t provide the proper abstractions for making UI components.

Источник

toggle show/hide div with button?

I was checking out other questions and I came across an answer in this thread: stackoverflow.com/questions/18808112/… . Apparently it’s because the new versions of JQuery don’t support toggle anymore.

@BarryDoyle: Actually, toggle-event was deprecated in 1.8. The way this answer uses toggle is still available, see this example: jsfiddle.net/KpFRb/532

jQuery(document).ready(function()< jQuery('#hideshow').live('click', function(event) < jQuery('#content').toggle('show'); >); >); 

For versions of jQuery 1.7 and newer use

jQuery(document).ready(function()< jQuery('#hideshow').on('click', function(event) < jQuery('#content').toggle('show'); >); >); 

For reference, kindly check this demo

Now .live() is deprecated in 1.7,and removed in 1.9 so in new versions you can use .on() (for details api.jquery.com/on )

How do you set this to hide by default? Edit: Figured it out, just added the toggle before the code that catches the button push.

I suppose toggle(‘show’) is a typo (that some have blatantly copied and pasted into other answers) because only ‘slow’ and ‘fast’ are accepted strings for duration. It works nonetheless because I think any invalid string will default to ‘slow’ . jsfiddle.net/d5y06e6o

Since toggling using style like:

myElement.style.display = someBoolState ? "block" : "none" 

is a really bad idea, here are some examples in JS, jQuery, HTML, CSS:

JavaScript .classList.toggle()

const elToggle = document.querySelector("#toggle"); const elContent = document.querySelector("#content"); elToggle.addEventListener("click", function() < elContent.classList.toggle("is-hidden"); >);

The beauty of the above is that the styling is purely handled where it should, and that’s in your stylesheet. Also, by removing the .is-hidden class your element will regain its original display mode, being it block , table , flex , or whatever.

jQuery .toggle()

jQuery — Toggle .toggleClass() Docs

.toggle() toggles an element’s display «block»/»none» values

HTML5 — Toggle using and

(unsupported on IE and Opera Mini)

HTML — Toggle using checkbox

[id^=toggle], [id^=toggle] + * < display:none; >[id^=toggle]:checked + *

HTML — Switch using radio

[id^=switch], [id^=switch] + * < display:none; >[id^=switch]:checked + *

SHOW 1 SHOW 2 
1 Merol Muspi.
 
2 Lorem Ipsum.
 

CSS — Switch using :target

(just to make sure you have it in your arsenal)

[id^=switch] + * < display:none; >[id^=switch]:target + *

SHOW 1 SHOW 2 
1 Merol Muspi .
 
2 Lorem Ipsum.
 

Animating class transition

If you pick one of JS / jQuery way to actually toggle a className , you can always add animated transitions to your element, here’s a basic example:

const elToggle = document.querySelector("#toggle"); const elContent = document.querySelector("#content"); elToggle.addEventListener("click", () => < elContent.classList.toggle("is-hidden"); >);

TOGGLE 
Some Togglable content.
 

Hi Sir @Roko C. Buljan is there a way to show the div initially in CSS — Switch using :target toggle please help I really need that.Thanks.

@ProgrammingHobby absolutely, if you want to make «Default open» one of the above containers (that use :target toggle method) simply add the desired hash ID to the page URI i.e: index.html#switch1 — and see the Element ID switch1 open right away. You can also manipulate the URL object using JS URL.hash — if needed: developer.mozilla.org/en-US/docs/Web/API/URL/hash

@Roko C. Buljan Thank you so much sir.Have a nice day.You answer was great and I have used that in many of mine projects.Thanks for that.

Источник

How to hide or show div on click in HTML

If you had searched google, you could have found about 1 mil. examples on how to do this. I will vote this question down.

@Rob Yup. It’s a bit disconcerting to hit the first result and reach a post with -4 votes. I understand the original downvoting on the sloppy writing and laziness of the OP, but maybe you could reconsider. The post is in fairly good shape now, and together with the answers it provides real value.

4 Answers 4

If you don’t use any 3rd party javascript (eg: jQuery), then use it:

document.getElementById('target-id').style.display = 'none'; // hide it document.getElementById('target-id').style.display = 'block'; // show it (for block element, eg: div) document.getElementById('target-id').style.display = 'inline'; // show it (for inline element, eg: span) 

i want that when page load firt two dic should be visible and when i click on button second div should open i have added your code but not working

Just adding my code above will not make it works. You need to add in your target elements (the elements to show/hide). And make sure that it is unique (no other elements have the same id). After that, put the onclick=». » in your trigger elements (the elements that when clicking on it, will show/hide the target elements). And it will be easier when you use 3rd party library, eg jQuery.

Источник

How to hide one div and show another div using button onclick?

1) Inside onclick, you don’t have to use «javascript:», that is implied.

2) You check for «display: block», I always check for «display: none» (Because the display can also be «inline-block», etc.)

function switchVisible() < if (document.getElementById('Div1')) < if (document.getElementById('Div1').style.display == 'none') < document.getElementById('Div1').style.display = 'block'; document.getElementById('Div2').style.display = 'none'; >else < document.getElementById('Div1').style.display = 'none'; document.getElementById('Div2').style.display = 'block'; >> >

Instead of JS changing the ‘style.display’, you could make it change/switch/toggle some classname. In your CSS, you could add transitions to those. Alternatively, you can use jQuery’s animate() function to do this. Have a look at their documentation.

As it is tagged with jQuery, here’s the simple jQuery answer

$('body').on("click touchstart", "#Button1", function(e)< $("#Div1, #Div2").toggle(); >); 

use on to listen for the id #Button, I’ve used both click and touchstart to make it mobile friendly, and then used toggle() which sets the state of the display: to the opposite to what it is now. So if it was display:none, it becomes display:block, if it was display:block it becomes display:none

Did not seem to be any point in answering the same result as others using pure JS when it had already been done. Not in to duplicating effort. I just looked at what the OP (the important one in this equation) asked for. realistically, (s)he only had a spelling mistake, spelling «Block» and not «block». Sorry for you that you feel aggrieved at a qualified answer to a quested question.

I am actually more for your answer. I was just stating that yes he tagged it as jQuery when it shouldn’t be. I’ll upvote you to just show that I’m sincere. 🙂

Источник