stackoom
  简体   繁体   中英

JavaScript show/hide divs

 原文  2018-06-05 18:06:31  4   5    javascript/ html/ css/ twitter-bootstrap

Question

Does anyone know if there is a way to make certain div's hide when clicking on a div box?

Upon clicking on the box, some applications div's will hide. Here is the first image:

Upon the boxes hiding, the other div's will realign in the spot of the current div's and then move back to standard view. Second image:

Code: 

 <div class="container"> <div class="row"> <div class="col-md-4" style="text-align: center;"> <button onclick="projectCollab()"><div id="decisionTreeBox" style="font-size: larger;">Collaborate on Projects</div></button> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeBox" style="font-size: larger;">Collaborate on Files</div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeBox" style="font-size: larger;">Collaborate Socially</div> </div> </div> <hr /> <div class="row"> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div> </div> </div> <script> function projectCollab() { var x = document.getElementById("decisionTreeOneDrive"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> </div>

Disregard the JavaScript code in the text back it didn't seem to work properly at all.

5 answers

solution1
 0 ACCPTED  2018-06-05 18:16:04

You have div's with similair ID's. Try use another selector, as example data attributes. 

<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="projects" style="font-size: larger;">Collaborate on Projects</div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="files" style="font-size: larger;">Collaborate on Files</div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-collaborate="socially" style="font-size: larger;">Collaborate Socially</div>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="projects" id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="projects" id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="files" id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="files" id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="socially" id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
                </div>
                <div class="col-md-4" style="text-align: center;">
                    <div data-decision="socially" id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
                </div>
            </div>
            <script>
            function projectCollab(){
                var divsToCange = document.querySelectorAll('[data-decision]'),
                    attr = this.getAttribute('data-collaborate');

                for(var i=0; i<divsToCange.length; i++){
                    var d = divsToCange[i];

                    if(d.getAttribute('data-decision') == attr){
                        d.style.display = (!d.style.display) ? 'none' : '';
                    }else{
                        d.style.display = '';
                    }
                }

                return false;
            }

            var divButtons = document.querySelectorAll('[data-collaborate]');

            for(var i=0; i<divButtons.length; i++){
                divButtons[i].addEventListener('click', projectCollab);
            }
            </script>
        </div>
    </body>
</html>

solution2
 0  2018-06-05 18:19:24

You can simply use jQuery .toggle() function to toggle between hide and show and it will auto arrange the adjacent div. 

 $(document).ready(function() { $('#decisionTreeBox').on('click', function() { $('#test').toggle('show'); }) }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-4" style="text-align: center;"> <button onclick="projectCollab()"><div id="decisionTreeBox" style="font-size: larger;">Collaborate on Projects</div></button> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeBox" style="font-size: larger;">Collaborate on Files</div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeBox" style="font-size: larger;">Collaborate Socially</div> </div> </div> <hr /> <div class="row"> <div class="col-md-4" style="text-align: center;" id="test"> <div id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div> </div> <div class="col-md-4" style="text-align: center;"> <div id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div> </div> </div> </div>

solution3
 0  2018-06-05 18:21:47

Which element you want to hide show you can call function onclick="function(this)" with this parameter. try this given example Below. 

<div class="container">
    <div class="row">
           <div class="col-md-4" style="text-align: center;">
             <button onclick="projectCollab(this)"><div class="container">

Collaborate on Projects Collaborate on Files Collaborate Socially

OneDrive Project SharePoint Teams Planner Yammer function projectCollab() { var x = document.getElementById("decisionTreeOneDrive"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

solution4
 0  2018-06-05 18:29:26

The the HTML is just a copy of yours, but the JS functions below should help you out if you prefer to use js instead of jquery. 

<div class="container">
   <div class="row">
        <div class="col-md-4" style="text-align: center;">
            <button onclick="projectCollab()"><div id="decisionTreeBox" style="font-size: larger;">Collaborate on Projects</div></button>
        </div>
        <div class="col-md-4" style="text-align: center;">
            <div id="decisionTreeBox" style="font-size: larger;">Collaborate on Files</div>
        </div>
        <div class="col-md-4" style="text-align: center;">
            <div id="decisionTreeBox" style="font-size: larger;">Collaborate Socially</div>
        </div>
      </div>
      <hr />
      <div class="row">
        <div class="col-md-4" style="text-align: center;">
            <div id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
            <div id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
            <div id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
            <div id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
            <div id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
        </div>
        <div class="col-md-4" style="text-align: center;">
            <div id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
        </div>
      </div>
    <script>
    function projectCollab() {
        var x = document.getElementById("decisionTreeOneDrive").setAttribute("onclick", hide());
    }
    function hide(){
        var sharepoint = document.getElementById("decisionTreeSharePoint");
        var planner = document.getElementById("decisionTreePlanner");
        if (sharepoint.style.display === "none") {
            sharepoint.style.display = "block";
        } else {
            sharepoint.style.display = "none";
        }

        if (planner.style.display === "none") {
            planner.style.display = "block";
        } else {
            planner.style.display = "none";
        }
    }
    </script>
</div>

solution5
 0  2018-06-05 18:46:42

I think you're encountering two issues.

  1. You want to toggle the squares below.
  2. You want the boxes to collapse in the space that is remaining.

To solve issue #1 - I created a vanilla javascript toggle that doesn't rely on any frameworks.

This requires three updates to the HTML

  • Creating the onClick toggle function on each button: onclick=toggleSquares('DESTINATION');
  • Adding the destination to the CSS column element ( solves #2 ) you want toggled: data-toggle="files"
  • Adding a CSS class hook ( optional ) on the CSS column element.

<button onclick=toggleSquares('projects')> <div id="decisionTreeBox">Collaborate on Projects</div> </button>

... 

<div class="col-md-4 square" data-toggle="projects">
    <div>
          <h3 id="innerBoxHeadings">OneDrive</h3>
    </div>
</div>

`

The javascript function looks something like this: 

function toggleSquares(type){
   var getSquares = document.querySelectorAll(".square");

  getSquares.forEach(function(element){

    if(element.getAttribute('data-toggle') != type) {
      element.classList.add('display-none');
    }
    else {
      element.classList.remove('display-none');
    }
  })
}

To step through the interaction:

  1. On click grab all of the elements that have the '.square' class and add them to a variable local to the function.
  2. Loop through that variables object and compare them to the type that has been passed down through the function
  3. If the element does not match the type that has been passed down -- add a css class with the 'display: none' attribute.
  4. If the element does match the type that has been passed down -- remove the css class if it had been added in step 3.

Here's a codepen that outlines the above interaction: https://codepen.io/MathiasaurusRex/pen/aKZbqR

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Show / Hide DIVs with JavaScript Javascript Skip hide/show divs Javascript Loop for show/hide DIVs Javascript hide show dynamic divs hide and show divs using javascript javascript functions to show and hide divs Hide/Show specific divs with JavaScript Show / hide divs clarification with javascript Javascript / JQuery - Hide 5 Divs, then Show 3 Random Divs JavaScript hide/show DIVs based on button click
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM