SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Helping with click function

    Hello, first of all I am really bad at javascript or jquery code writting so please excuse me if my answer is really stupid. I am trying to make DropDown Menu with the click function but I want when you want to drop the menu to be a down arrow and when you want to hide the menu to have an up arrow. I wrote something but when you are using it for first time everything is working fine than after the first time there is only the up arrow. I know that the problem is comming in the "if" section of the code but I cant fix it by my own. I would really appreciate if someone find time to help me, thanks in advance.

    Here is a link to jsfiddle.net and what I have done --> http://jsfiddle.net/Dimbadboy/pH74h/8/

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    You can hard-code the up/down arrows into your HTML, hide one of them and then toggle between them when the user clicks on the menu:

    Code:
    <div id="headermenu">
        <div id="toggle-section">
            TEST TEST TEST TESTE TEST TEST TEST<br />
            TEST TEST TEST TESTE TEST TEST TEST<br />
            TEST TEST TEST TESTE TEST TEST TEST       
        </div>
        <a id="open-close-toggle">
            <img src="https://cdn1.iconfinder.com/data/icons/basic-toolbar-icons/20/Down_arrow_download_up_page_add_warning_thumbs_text_search.png" />
            <img class="hidden" src="https://cdn1.iconfinder.com/data/icons/basic-toolbar-icons/20/Up_arrow_vote_like_upload_thumbs_down_thumb_hand_edit.png" />
        </a>
    </div>
    
    <script>
    $('#open-close-toggle').on("click", function(){
        var $arrows = $(this).find("img");
        $('#toggle-section').slideToggle(function(){
            $arrows.toggle();
        });
    });
    </script>
    Here's a demo.

  3. #3
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo, THANKS SO MUCH !!!

    But there is a problem on JsFiddle everything is working fine, but when I added the codes in my website it dosn't want to move. I know that I am really tedious but can you take a look and tell me how to fix it. Thank you in advance again.

    PS: The website is only a beta, it is based only in HTML so will not be a problem to access all the codes in it. ---> http://testvam-sait-be-bace.free.bg/
    Last edited by Mittineague; Feb 28, 2014 at 14:47. Reason: removing unnecessary link

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    The problem is relatively easy to solve.

    You are including the menu script before the elements are present in the page.

    You have:

    Code:
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
      <meta charset="UTF-8">
      ...
      <script type="text/javascript" src="http://www.testvam-sait-be-bace.free.bg/js/Menu/menuscript.js"></script>
    </head>
    <body>
    <div id="headermenu">
        <div id="toggle-section">
            TEST TEST TEST TESTE TEST TEST TEST<br />
            TEST TEST TEST TESTE TEST TEST TEST<br />
            TEST TEST TEST TESTE TEST TEST TEST       
        </div>
        <a id="open-close-toggle">
            <img src="https://cdn1.iconfinder.com/data/icons/basic-toolbar-icons/20/Down_arrow_download_up_page_add_warning_thumbs_text_search.png" />
            <img class="hidden" src="https://cdn1.iconfinder.com/data/icons/basic-toolbar-icons/20/Up_arrow_vote_like_upload_thumbs_down_thumb_hand_edit.png" />
        </a>
    </div>
    ...
    </body>
    </html>
    You need to move the scripts to just before the closing <body> tag:

    Code:
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
      <meta charset="UTF-8">
      /* YOUR CSS SHOULD GO HERE */
    </head>
    <body>
    <div id="headermenu">
        <div id="toggle-section">
            TEST TEST TEST TESTE TEST TEST TEST<br />
            TEST TEST TEST TESTE TEST TEST TEST<br />
            TEST TEST TEST TESTE TEST TEST TEST       
        </div>
        <a id="open-close-toggle">
            <img src="https://cdn1.iconfinder.com/data/icons/basic-toolbar-icons/20/Down_arrow_download_up_page_add_warning_thumbs_text_search.png" />
            <img class="hidden" src="https://cdn1.iconfinder.com/data/icons/basic-toolbar-icons/20/Up_arrow_vote_like_upload_thumbs_down_thumb_hand_edit.png" />
        </a>
    </div>
    <!-- YOUR JS SHOULD GO HERE -->
    <script type="text/javascript" src="http://www.testvam-sait-be-bace.free.bg/js/Menu/menuscript.js"></script>
    </body>
    </html>
    Then it'll work just fine.

    If you don't want to change the order of the scripts, you should wrap your menu code in a $(document).ready() callback:

    Code:
    $(function(){
      $('#open-close-toggle').on("click", function(){
        var $arrows = $(this).find("img");
        $('#toggle-section').slideToggle(function(){
          $arrows.toggle();
        });
      });
    });


Bookmarks

Posting Permissions

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