Helping with click function

JavaScript
1

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

Hi there,

Welcome to the forums :slight_smile:

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:

<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

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/

4

Hi,

The problem is relatively easy to solve.

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

You have:

<!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:

<!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:

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