[removed] Hiding and Showing div tag with a toggle button

前端未结

关注

 4  2049

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, pr

相关标签:

4条回答

情书的邮戳

2020-12-12 00:09

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

<p class="button" onclick="toggle_visibility('hideMe')">Show/hide</p>
<div id="hideMe">I want to hide this by pressing the button above</div>

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';
    }
}

DEMO

0 讨论(0)

庸人自扰

2020-12-12 00:13

You can add attach an event listener to the P tag and have that call a Toggle() function to swap the display value as shown below.

Example here - JSFiddle

function Toggle() {
    var div = document.getElementsByTagName('div')[0];

    if (div.style.display == 'none') {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
}

(function () {

    var button = document.querySelectorAll(".button");

    for (var i = 0; i < button.length; i++) {
        if (button[i].addEventListener) {
            button[i].addEventListener("click", function () {
                Toggle();
            });
        } else {
            button[i].attachEvent("click", function () {
                Toggle();
            });
        }
    }
})();

Though you would be better adding IDs to your elements to make them easier to reference.

0 讨论(0)

无人共我

2020-12-12 00:20
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

时光取名叫无心

2020-12-12 00:28

An alternative solution just using 'onclick' attribute inside your HTML tag:

<!DOCTYPE html>
    <html>
        <head>
           <script>
               function toggle(){
                   var div = document.getElementById("divSection");
                   if (div.style.display =='block'){
                       div.style.display = 'none';
                       return;
                   }
                   div.style.display ='block';
             }
           </script>
        </head>

        <body>
            <p>Click the button to trigger a function.</p>
            <p class="button" onclick="toggle()">Show/hide</p>
            <div id='divSection'> I want to hide this by pressing the button above</div>
        </body>
    </html>

I hope it helps.

0 讨论(0)