Home/ Questions/Q 8170635
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T21:11:19+00:00

i am super new to javascript and jquery self thought ….been working on this

  • 0

i am super new to javascript and jquery self thought ….been working on this menu for a bit and i have finally “finished” but iv got some horrendous code and i am looking for ways to improve my code to make it more readable and functional any tips and hints would be helpful. the idea to save space on the page each div will have different parts of a form that the user will fill out
here is some of the code

       <body>

    <div class="content">

        <div class="menu" id="menu"></div>
        <div class="content" id="sort"></div>
        <div class="menu"id="menu1"></div>
        <div class="content" id="1sort"></div>
        <div class="menu"id="menu2"></div>
        <div class="content" id="sort2"></div>
    </div>

    <script>
        var show = true;
        var show2 = false;
        var show3 = false;

        $('#1sort').hide("fast");
        $('#sort2').hide("fast");

        $("#menu").click(function () {
            if (show == true) {
                $('#sort').hide("fast");
                $('#1sort').show("fast");
                show = false;
                show2 = true;
            } else if (show == false) {
                $('#sort').show("fast");
                $('#1sort').hide("fast");
                $('#sort2').hide("fast");
                show = true;
                show2 = false;
                show3 = false;
            }

        });

        $("#menu1").click(function () {
            if (show2 == true) {
                $('#1sort').hide("fast");
                $('#sort2').show("fast");
                show2 = false;
                show3 = true;
            } else if (show2 == false) {
                $('#1sort').show("fast");
                $('#sort').hide("fast");
                $('#sort2').hide("fast");
                show = false;
                show2 = true;
                show3 = false;
            }

        });

        $("#menu2").click(function () {
            if (show3 == false) {
                $('#1sort').hide("fast");
                $('#sort').hide("fast");
                $('#sort2').show("fast");
                show = false;
                show2 = false;
                show3 = true;
            }                      
          });       



    </script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use some basic traversal functions, and .is to determine visibility. You don’t need boolean variables nor element IDs that way: http://jsfiddle.net/K2sqy/2/.

    $(".menu").click(function() {
    var $next = $(this).next(".content");  // corresponding .content element
    var isVisible = $next.is(":visible");  // is it currently visible?

    $(this).siblings(".content").hide("fast");  // hide all siblings
    $next[isVisible ? "hide" : "show"]("fast");  // toggle the corresponding .content

    if(isVisible) {
        // it was visible, so now it's hidden. Show the other .content:
        // the next or, if not available, the previous
        var $second = $next.nextAll(".content").first();
        if($second.length === 0) {
            $second = $next.prevAll(".content").first();
        }
        $second.show("fast");
    }
});
    • 0