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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2013
    Posts
    157
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Toggle Show/Hide doesn't work on first click

    I have a button that toggles showing and hiding content when displayed. It also changes the innerHTML of the button.

    However, On the very first click it never works, then after that it works flawlessly. No error messages on my console.

    Code:
    <script>
    mainLeft = document.querySelector("#mainContentLeft");
    mainLeftTwo = document.querySelector("#mainContentLeft2");
    showMore = document.querySelector("#showMain button");
    
    showMore.addEventListener("click", toggleMainContent, false);
    
    function toggleMainContent() {
    		if ( mainLeftTwo.style.display != 'none' ) {
    
                    showMore.innerHTML = 'More New Features';
    		mainLeftTwo.style.display = 'none';
    	}
    
    	else {
    		showMore.innerHTML = 'Show Less Features';
    		mainLeftTwo.style.display = 'block';
    	}
    
    }
    </script>
    The CSS is set at

    Code:
    	#mainContentLeft2 {
    		display: none;
    		padding: 20px;
    		text-align: center;	
    	}

  • #2
    New Coder
    Join Date
    Jun 2005
    Location
    Blackpool. UK
    Posts
    98
    Thanks
    0
    Thanked 4 Times in 4 Posts
    It's because the first click has to get the current state before it can be toggled, add an onMouseOver event to get the current value and pass that to the toggle function as the initial state.
    Chris

    Indifference will be the downfall of mankind, but who cares?

  • Users who have thanked chrishirst for this post:

    7daytheory (05-29-2014)

  • #3
    Regular Coder
    Join Date
    Aug 2013
    Posts
    157
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Thanks

  • #4
    Regular Coder
    Join Date
    Aug 2013
    Posts
    157
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by chrishirst View Post
    It's because the first click has to get the current state before it can be toggled, add an onMouseOver event to get the current value and pass that to the toggle function as the initial state.
    If you apply a mouseover event then everytime you mouseover it will reset the function to it's initial state which is hidden. So it hides everytime you hover on the button even if you're not clicking. But you pointed me in the right direction I gave it an initial state in javascript in my init function when the page loads.

    Thanks

  • #5
    New Coder
    Join Date
    Jun 2005
    Location
    Blackpool. UK
    Posts
    98
    Thanks
    0
    Thanked 4 Times in 4 Posts
    No it won't, a mouseover is ALWAYS going to get the current state AND you check in the mouseover for the value being NULL and only set the value if it is.
    Chris

    Indifference will be the downfall of mankind, but who cares?


  •  

    Posting Permissions

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