Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show/Hide div using js

    Hello all. I am using the following script to show and hide divs. I have several divs like this on the page. It works great except I have to click on the same button to close one div before I can open another or else they will just keep opening below each other (so many can be open at a time). How can I modify my script so that if another div is opened any div that is already showing closes?

    Code:
    $(document).ready(function() {
      $("#button1").toggle(function() {
        //$(this).text('Hide Content');
      }, function() {
        //$(this).text('show Content');
      }).click(function(){
    	  $("#hidden_about").slideToggle("slow");
      });
    });
    
    $(document).ready(function() {
      $("#button2").toggle(function() {
        //$(this).text('Hide Content');
      }, function() {
        //$(this).text('show Content');
      }).click(function(){
    	  $("#hidden_contact").slideToggle("slow");
      });
    });

    Code:
    <a href="" id="button1" class="button_style">Open About Content</a>
    
    <a href="" id="button2" class="button_style">Open Contact Content</a>
    I appreciate all help!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,303
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Try this:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style type="text/css">
    #div1{
    	height: 80px;
    	width: 200px;
    	text-align:center;
    	background-color: blue;
    	color: white;
    	padding-top: 20px;
    }
    #div2{
    	height: 80px;
    	width: 150px;
    	text-align:center;
    	background-color: green;
    	color: white;
    	padding-top: 20px;
    	position:absolute;
    	top: 200px;
    }
    </style>
    </head>
    
    <body>
    <button id="button1" class="button_style">Open "About Content"</button>
    <button id="button2" class="button_style">Open "Contact Content"</button>
    <div id="div1">About Content</div>
    <div id="div2">Contact Content</div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
    byebye();
    $('#button1').click(function(){
    	byebye();
    	document.getElementById('div1').style.display = 'block';
    });
    $('#button2').click(function(){
    	byebye();
    	document.getElementById('div2').style.display = 'block';
    });
    function byebye(){
    	document.getElementById('div1').style.display = 'none';
    	document.getElementById('div2').style.display = 'none';
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Location
    Oslo, Norway
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have very little experience with jQuery, so I made a crude example for you using AngularJs instead.
    Hope you like it

    Code:
    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    
    <style>
        .button_style.showbtn:before{
            content:"Show ";
        }
        .button_style:before{
            content:"Hide ";
        }
    </style>
    </head>
    <body ng-controller="DivController">
    <button class="button_style" ng-class="{'showbtn':!divGroup.about}" ng-click="toggle('about')">About Content</button>
    
    <button class="button_style" ng-class="{'showbtn':!divGroup.contacts}" ng-click="toggle('contacts')">Contact Content</button>
    
    <div ng-show="divGroup.about">this is about</div>
    <div ng-show="divGroup.contacts">My contacts</div>
    
    <script>
        angular.module('myApp', [])
        .controller('DivController', function($scope){
            $scope.divGroup = {
                about:false,
                contacts:false
            };
            $scope.toggle = function(toggleKey){
                angular.forEach($scope.divGroup, function(value, key){
                    if (key === toggleKey) $scope.divGroup[key]=!$scope.divGroup[key];
                    else $scope.divGroup[key]=false;
                });
            };
        });
    </script>
    </body>
    </html>

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    if you give all the divs class="content" you can do this:

    Code:
    <script type="text/javascript">
      $("#button1").click(function() {
        $(".content").slideUp("slow");
    	  $("#hidden_about").slideToggle("slow");
    	  });
    
    	$("#button2").click(function() {
    	$(".content").slideUp("slow");	
    	$("#hidden_contact").slideToggle("slow");
    	 
    	 }); 
    
    
    </script>

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    87
    Thanks
    5
    Thanked 14 Times in 14 Posts
    Here's a script where you can add additional buttons and still have it work:

    Close Content Script

    I'm sure the script could be tighten up and there's a small glitch, but I'm sure it can be easily fixed.
    Last edited by Strider64; 05-05-2014 at 07:46 PM.
    True courage is about knowing not when to take a life, but when to spare one. PDO Tutorial

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for the delay in responding. Just had a chance to get back to it. I appreciate your help. It looks like all I had to do was add the following to the script to hide the already open div...

    document.getElementById('div1').style.display = 'none';

  • #7
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your post are very effective and I can learn a lot of information by your post. And I learn JQuery by these. Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •