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 15 of 15
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts

    onclick assistance please

    Hi everyone,

    Just hoping to get some assistance. I've created an onclick function for a form to appear which works fine, there are 2 things which I need assistance for.

    1. I want the form to remain hidden as default until clicked for it to appear
    2. I would also like the form to disappear once it is clicked again

    I've kept the code as onmouseout="hide" just so it works (which is works fine)

    My code is as below


    <div onclick="show()" onmouseout="hide()" id="buyappear"><strong>Buy</strong></div>

    <div class="searchfunction"><input type="text" Value="Search" class="searchform" size="40" height="25" /></div>

    <!-- search function for buy -->
    <script>function show(){

    document.getElementById("buyrevealed").style.display = "block";
    }

    function hide(){
    document.getElementById("buyrevealed").style.display = "none";
    }
    </script>


    Any assistance would be appreciated.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by rexhvn View Post
    1. I want the form to remain hidden as default until clicked for it to appear
    2. I would also like the form to disappear once it is clicked again
    Is that a good idea? Click on what? You cannot click on a form which is not displayed. Likely to lead to user frustration.

    Code:
    <script type="text/javascript">
    function Toggle(obj) {
    var Style = document.getElementById(obj).style;
    Style.display = (Style.display == "none") ? "block" : "none";
    }
    </script>
    
    <div id="MyDiv">
    	Form Content Goes Here
    </div>
    
    <a href="#" onclick="Toggle('MyDiv'); return false;">Toggle</a>

    “Expert: a man who makes three correct guesses consecutively.” - Dr. Laurence J. Peter (American "hierarchiologist", Educator and Writer, 1919-1990)
    Last edited by Philip M; 09-25-2012 at 01:01 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Is that a good idea? Click on what? You cannot click on a form which is not displayed. Likely to lead to user frustration.

    Code:
    <script type="text/javascript">
    function Toggle(obj) {
    var Style = document.getElementById(obj).style;
    Style.display = (Style.display == "none") ? "block" : "none";
    }
    </script>
    
    <div id="MyDiv">
    	Form Content Goes Here
    </div>
    
    <a href="#" onclick="Toggle('MyDiv'); return false;">Toggle</a>

    “Expert: a man who makes three correct guesses consecutively.” - Dr. Laurence J. Peter (American "hierarchiologist", Educator and Writer, 1919-1990)
    I will re-explain the function.

    The word 'login' for example. onclick the login

    it will then display a form (THIS CURRENTLY WORKS FINE)

    Re-click the word "login"

    Form disappears.

    Currently I cannot onclick the word login for the form to disppear. I currently have it set on 'onmouseout' which works fine. I just want to be able to click on the word instead. I also want the form as default to appear hidden.
    Last edited by rexhvn; 09-26-2012 at 01:25 AM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Read Philip's code: You want a TOGGLE.

    Here. The specific code for your actual situation:
    Code:
    <div onclick="toggle()"><strong>Buy</strong></div>
    <div id="buyrevealed" style="display: none;">
        ... your form ...
    </div>
    ...
    function toggle( )
    {
        var div = document.getElementById("buyrevealed");
        div.style.display = ( div.style.display == "block" ) ? "none" : "block";
    }
    ...
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Read Philip's code: You want a TOGGLE.

    Here. The specific code for your actual situation:
    Code:
    <div onclick="toggle()"><strong>Buy</strong></div>
    <div id="buyrevealed" style="display: none;">
        ... your form ...
    </div>
    ...
    function toggle( )
    {
        var div = document.getElementById("buyrevealed");
        div.style.display = ( div.style.display == "block" ) ? "none" : "block";
    }
    ...
    }
    Works perfectly, thank you very much!

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Read Philip's code: You want a TOGGLE.

    Here. The specific code for your actual situation:
    Code:
    <div onclick="toggle()"><strong>Buy</strong></div>
    <div id="buyrevealed" style="display: none;">
        ... your form ...
    </div>
    ...
    function toggle( )
    {
        var div = document.getElementById("buyrevealed");
        div.style.display = ( div.style.display == "block" ) ? "none" : "block";
    }
    ...
    }
    Is there a way I can have multiple toggle's?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Of course.

    How "generic" the toggle code is depends on your situation. Show the HTML and indicate what objects should toggle what targets.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    It would seem to me that Philip's code in post #2 can be used for multiple elements - just substitute the id of the element to be toggled for 'MyDiv' in the function call...

  • #9
    New Coder
    Join Date
    Oct 2011
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi everyone,

    Below is my code for the toggle. I want the 'rentvealed', 'buyrevealed' and 'soldrevealed' to appear when they are onclicked, as they will all have different forms...

    Code:
    <div onclick="toggle()"><strong>Rent</strong></div>
    <div onclick="toggle()"><strong>sold</strong></div>
    
    <div id="rentrevealed" style="display: none;">
    more code here....
    
    <div id="soldrevealed" style="display: none;">
    more code here....
    
    /* Only for the buy revealed single toggle */
    <div onclick="toggle()"><strong>Buy</strong></div>
    <div id="buyrevealed" style="display: none;">
      current code here
    </div>
    ...
    function toggle( )
    {
        var div = document.getElementById("buyrevealed");
        div.style.display = ( div.style.display == "block" ) ? "none" : "block";
    }
    If this is not sufficent, please let me know. Thanks for all your help
    Last edited by rexhvn; 09-29-2012 at 08:34 AM.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    Like I say, just pass the id of the element you want to toggle in the function call...
    Code:
    <body>
    <div onclick="toggle('rentrevealed')"><strong>Rent</strong></div>
    <div onclick="toggle('soldrevealed')"><strong>sold</strong></div>
    
    <div id="rentrevealed" style="display: none;">
    rent content here....
    </div>
    <div id="soldrevealed" style="display: none;">
    sold content here....
    </div>
    <div onclick="toggle('buyrevealed')"><strong>Buy</strong></div>
    <div id="buyrevealed" style="display: none;">
    buy content here...
    </div>
    <script>
    function toggle(id){
        var div = document.getElementById(id);
        div.style.display = ( div.style.display == "block" ) ? "none" : "block";
    }
    </script>
    </body>

  • #11
    New Coder
    Join Date
    Oct 2011
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    Like I say, just pass the id of the element you want to toggle in the function call...
    Code:
    <body>
    <div onclick="toggle('rentrevealed')"><strong>Rent</strong></div>
    <div onclick="toggle('soldrevealed')"><strong>sold</strong></div>
    
    <div id="rentrevealed" style="display: none;">
    rent content here....
    </div>
    <div id="soldrevealed" style="display: none;">
    sold content here....
    </div>
    <div onclick="toggle('buyrevealed')"><strong>Buy</strong></div>
    <div id="buyrevealed" style="display: none;">
    buy content here...
    </div>
    <script>
    function toggle(id){
        var div = document.getElementById(id);
        div.style.display = ( div.style.display == "block" ) ? "none" : "block";
    }
    </script>
    </body>
    I want to toggle as well as what I have already done.

    <div id="rentrevealed"><input type="text" value="search"</div>

    Any help would be apprecaited. These are not to appear at the same time...

    Click div1 - this will appear
    click div2 something else will appear etc..

    thanks guys
    Last edited by rexhvn; 10-02-2012 at 05:24 AM.

  • #12
    New Coder
    Join Date
    Oct 2011
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Help please?

    Thank you.

  • #13
    New Coder
    Join Date
    Oct 2011
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've just used seperate toggles so I figures it out.

    Whats the best way to incorporate fadein effect?

    Thanks

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by rexhvn View Post
    Whats the best way to incorporate fadein effect?
    As this is a completely different topic you should start a new thread with an appropriate title.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #15
    New Coder
    Join Date
    Oct 2011
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi guys,

    I wanted to bring this thread back for some more assistance with the toggle function.

    Currently I have 4 seperate toggle functions - lets call them 1,2,3,4

    The code of each toggle is as follows
    Code:
    function toggle(1/2/3/4)
    {
        var div = document.getElementById("buyrevealed");
        div.style.display = ( div.style.display == "block" ) ? "none" : "block";
    }
    Currently if I click toggle 1, all is good, however if I click toggle 2 while toggle 1 is displayed , Toggle 2 will not appear due to the way it is coded.

    I was hoping to get assistance to hide any other toggle unless it is clicked on so there won't be an issue when clicking on any of them

    Hope this makes sense.

    Thanks guys


  •  

    Posting Permissions

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