Search code examples
jqueryshow-hide

Jquery show and Hide elements


I was wondering if there is a simpler way of writing what I just did below. Basically the whole idea of the site is, you click one link... it will then present you with two radio buttons, selecting one will give you another set of link which clicked on will give you a table.... and same thing with the other radio button.

            <script type="text/javascript">
            $('.topreports').toggleClass('reportshovered');
            $('#clickapp').click(function () {
                $('#pendingappsasgn').hide();
                $('#closedappsasgn').hide();
                $('#pendingapptableasgn').hide();
                $('#adminpendingasgn').hide();
                $('#closedapptableasgn').hide();
                $('#closedpendingasgn').hide();
                $('#comp1').hide();
                $('#comp').slideDown('200');
            });

            $('#clickapp').click(function () {
                $('#comp1').hide();
                $('#closedapps').hide();
                $('#comp').slideDown('200');

                //pending radio buttons

                if ($('#app1').click(function () {
                     $('#closedapps').hide();
                    $('#closedpending').hide();
                    $('#closedapptable').hide();
                    $('#pendingapps').slideDown('200');

                }));

                //closed radio buttons

                if ($('#app2').click(function () {
                    $('#pendingapps').hide();
                    $('#pendingapptable').hide();
                    $('#adminpending').hide();
                    $('#closedapps').slideDown('200');


                }));

                //2 pending links

                if ( $('#reporttemp').click(function () {
                    $('#adminpending').hide();
                    $('#pendingapptable').slideDown('200');

                }));

                if ( $('#reportadmin').click(function(){
                        $('#pendingapptable').hide();
                        $('#adminpending').slideDown('200');
                }));

                //Closed Approval Links

                if ( $('#closedtemps').click(function () {
                        $('#closedpending').hide();
                        $('#closedapptable').slideDown('200');

                }));

                if ( $('#closedadmin').click(function () {
                    $('#closedapptable').hide();
                    $('#closedpending').slideDown('200');

                }));

            });

            //Assigned Approval list

            $('#clickassigned').click(function () {
                $("input:radio").removeAttr("checked");
                $('#comp').hide();
                $('#pendingapps').hide();
                $('#closedapps').hide();
                $('#pendingapptable').hide();
                $('#adminpending').hide();
                $('#closedapptable').hide();
                $('#closedpending').hide();
                $('#comp1').slideDown('200');


            });

            //assigned Approval Pending Radio
            if ($('#asgnpending').click(function () {
                     $('#closedappsasgn').hide();
                     $('#closedpendingasgn').hide();
                     $('#closedapptableasgn').hide();
                     $('#pendingasgn').slideDown('200');

            }));

            //Assigned Approval closed radio buttons

            if ($('#asgnclosed').click(function () {
                    $('#pendingasgn').hide();
                    $('#pendingapptableasgn').hide();
                    $('#adminpendingasgn').hide();
                    $('#closedappsasgn').slideDown('200');


            }));
            if ($('#reporttempasgn').click(function () {
                     $('#adminpendingasgn').hide();
                     $('#pendingapptableasgn').slideDown('200');

            }));

            if ($('#reportadminasgn').click(function () {
                     $('#pendingapptableasgn').hide();
                     $('#adminpendingasgn').slideDown('200');
            }));

            //Closed Approval Links

            if ($('#closedtempsasgn').click(function () {
                    $('#closedpendingasgn').hide();
                    $('#closedapptableasgn').slideDown('200');

            }));

            if ($('#closedadminasgn').click(function () {
                    $('#closedapptableasgn').hide();
                    $('#closedpendingasgn').slideDown('200');

            }));

Solution

  • You can assign a class to similar elements, and hide them all with the class selector.

    $(".classSelect").hide();