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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2018
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    This simple show / hide snippet

    Hi everybody.

    I'm trying to edit this script in order to show hide only one hidden div at time:

    Code:
    <html>
    <head>
    <title>test</title>
     
    <script type="text/javascript">
    function getEl(id) {
        element = document.getElementById(id);
        return element;
    }
    function hideEl(id) {
        var element = getEl(id);
        element.style.display = 'none';
    }
    function showEl(id) {
        var element = getEl(id);
        element.style.display = '';
    }
    
    function ShowHideUserDiv() {
    	var el = 'UserDiv';
    		if(getEl(el).style.display == 'none') {
    			showEl(el);
    		} else {
    			hideEl(el);
    		}
    	}
    	
    </script>
    
    </head
    
    <body>
    
    <a href="javascript:void(0);" onclick="ShowHideUserDiv()">Show</a> 
    <div id="UserDiv23" style="display:none;">text here</div>
    <br>
    <a href="javascript:void(0);" onclick="ShowHideUserDiv()">Show</a> 
    <div id="UserDiv45" style="display:none;">other text</div>
    <br>
    <a href="javascript:void(0);" onclick="ShowHideUserDiv()">Show</a> 
    <div id="UserDiv697" style="display:none;">some words</div>
    <br>
    and many other user Divs...
    
    </body>
    </html>
    Of course all User Divs are extracted from a db in a PHP page.
    Where is the mistake?

    Thanks a lot!

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,786
    Thanks
    35
    Thanked 1,044 Times in 1,040 Posts
    Welcome to the forums jsboy. Hope we will be your go to for help while your learning.

    First off, I'd use buttons instead of anchors. Next, I'd pass the hidden DIV's ID to make things a lot simpler - you only need one function to do what you want.. I would also change the text in the button from Show to Hide. To do this the button would needan ID also. And Most Importantly I'd use a doctype so the browser would know how to interpet the code.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>test</title>
     </head>
    
    <body>
    
    <button id="UserDiv23Button" onclick="ShowHideUserDiv('UserDiv23', this.id)">Show</button>
    <div id="UserDiv23" style="display:none;">text here</div>
    <br>
    <button id="UserDiv45Button" onclick="ShowHideUserDiv('UserDiv45', this.id)">Show</button>
    <div id="UserDiv45" style="display:none;">other text</div>
    <br>
    <button id="UserDiv697Button" onclick="ShowHideUserDiv('UserDiv697', this.id)">Show</button> 
    <div id="UserDiv697" style="display:none;">some words</div>
    <br>
    
    <script type="text/javascript">
    function ShowHideUserDiv(Id, id) {
    	if(document.getElementById(Id).style.display == 'none') {
    		document.getElementById(Id).style.display = 'block';
    		document.getElementById(id).innerHTML = 'Hide';
    	} else {
    		document.getElementById(Id).style.display = 'none';
    		document.getElementById(id).innerHTML = 'Show';
    	}
    }
    	
    </script>
    </body>
    </html>
    Last edited by sunfighter; Sep 29th, 2018 at 07:21 PM.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,845
    Thanks
    58
    Thanked 690 Times in 685 Posts
    I would consider getting rid of the inline JavaScript and CSS and in fact getting rid of the Javascript entirely:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>test</title>
    <style>
    div{
    display:none;
    }
    :target{
    display:block;
    }
    </style>
    </head>
    
    
    <body>
    
    
    
    
    <a href="#UserDiv23">Show</a> 
    <div id="UserDiv23">text here</div>
    <br>
    <a href="#UserDiv45">Show</a> 
    <div id="UserDiv45">other text</div>
    <br>
    <a href="#UserDiv697">Show</a> 
    <div id="UserDiv697">some words</div>
    <br>
    and many other user Divs...
    
    
    
    
    </body>
    </html>

  4. #4
    New to the CF scene
    Join Date
    Sep 2018
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you so much! both usefull examples

  5. #5
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,786
    Thanks
    35
    Thanked 1,044 Times in 1,040 Posts
    I keep forgetting about the :target pseudo selector. And I prayed to have this for a long long time. damn I'm not good. Losing memory. But it does cause the older selected DIV to disappear, maybe not what is wanted, and I can not get the button to change text. There may be a way of doing this, but right now I don't have the time to play with it.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  6. #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,845
    Thanks
    58
    Thanked 690 Times in 685 Posts
    OP's requirement was "to show hide only one hidden div at time", so yes :target is limited that way but seems to do the necessary.

    :target only works with href and href is only valid on an <a> tag afaik, so native buttons won't work here.

    You could always style an a tag to look like a button.

    If you want multiple divs shown you can use labels to check hidden checkboxes and use the :checked pseudoclass to target the div (providing it sits at the same level or lower in the DOM)

    As for changing the text, I haven't tried it but you might be able to do something with :after and content: . It would be worth looking at but really, css can only do so much of js's work and there it may be straying from its lane a little

  7. #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,925
    Thanks
    65
    Thanked 601 Times in 595 Posts

    Lightbulb

    Another approach ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Toggle </title>
    <style>
     .hide { display: none; }
    </style>
    </head>
    <!-- For: https://www.codingforums.com/newreply.php?do=postreply&t=393267 -->
    
    <body>
    <h1> Toggles </h1>
    <input type="button" onclick="toggleme2('Info2',this)" value="Show">
      <pre id="Info2" class="hide">
        function toggleme2(IDS) {
          var x = document.getElementById(IDS);
          if (x.className === 'hide') { x.className = ''; }
                                 else { x.className = 'hide'; }
        }
      </pre>
    <p>
    <input type="button" onclick="toggleme2('Info1',this)" value="Show">
      <div id="Info1" class="hide">
        Another &lt;div&gt; tag area
      </div>
    
    <script>
    function toggleme2(IDS,info) {
      var x = document.getElementById(IDS);
      if (x.classList.contains('hide')) { x.classList.remove('hide'); info.value = 'Hide'; }
                                   else { x.classList.add('hide');  info.value = 'Show';}
      
    }
    </script>
    
    </body>
    </html>

  8. #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,845
    Thanks
    58
    Thanked 690 Times in 685 Posts
    a little POC with some stylin', multiple divs showable (change the checkboxes to radios if you only want one shown at a time) and "button" text changing...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>test</title>
    <style>
    div{
    visibility:hidden;
    padding:5px;
    }
    :checked + label + div{
    visibility:visible;
    }
    label::after { 
        content: "Show";
    }
    :checked + label::after { 
        content: "Hide";
    }
    input[type="checkbox"]{
    	display:none;
    }
    
    
    label{
    border:solid 1px;
    border-radius: 15px;
    padding:2px;
    }
    </style>
    </head>
    
    
    <body>
    <input type="checkbox" id="UserDiv23"/>
    <label for="UserDiv23"></label> 
    <div>text here</div>
    <input type="checkbox" id="UserDiv45"/>
    <label for="UserDiv45"></label> 
    <div>other text</div>
    <input type="checkbox" id="UserDiv697"/>
    <label for="UserDiv697"></label> 
    <div>some words</div>
    </body>
    </html>


 

Tags for this Thread

Posting Permissions

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