I have a web page with some jQuery code. Right now I am hardcoding

Question

0

Asked: June 14, 20262026-06-14T04:24:25+00:00 2026-06-14T04:24:25+00:00

I have a web page with some jQuery code. Right now I am hardcoding

0

I have a web page with some jQuery code. Right now I am hardcoding my jQuery syntax to accommodate for updates to 7 rows in a DB Table and also to anticipate growth of about 3 more rows. But I don’t want to check my app daily to see if the DB Table has grown beyond 10 rows and then have to add more hardcoded jQuery syntax.

Can anyone help me take my jQuery and condense it to be truly dynamic — thus removing the hardcoded nature of it and enable it to handle any number of rows? Thanks.

<style type="text/css">
div.icons {
    clear:both;
    float:left;
    height:24px;
    width:30px;
}
div.content {
    height:24px;
}
div.show {
    display:block;
}
div.hide {
    display:none;
}
input.textbox {
    padding:0;
    margin:0;
    width:300px;
}
input.submitButton {
    padding:0;
    margin:0;
    vertical-align:middle;
}
img.button {
    vertical-align:middle;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
    $('#b-001').on('click', function(){
        //$('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-001-on').toggle();
        $('#d-001-off').toggle();
        $('#d-001-off-focus').focus();
    });
    $('#b-002').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        //$('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-002-on').toggle();
        $('#d-002-off').toggle();
        $('#d-002-off-focus').focus();
    });
    $('#b-003').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        //$('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-003-on').toggle();
        $('#d-003-off').toggle();
        $('#d-003-off-focus').focus();
    });
    $('#b-004').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        //$('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-004-on').toggle();
        $('#d-004-off').toggle();
        $('#d-004-off-focus').focus();
    });
    $('#b-005').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        //$('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-005-on').toggle();
        $('#d-005-off').toggle();
        $('#d-005-off-focus').focus();
    });
    $('#b-006').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        //$('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-006-on').toggle();
        $('#d-006-off').toggle();
        $('#d-006-off-focus').focus();
    });
    $('#b-007').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        //$('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-007-on').toggle();
        $('#d-007-off').toggle();
        $('#d-007-off-focus').focus();
    });
    $('#b-008').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        //$('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-008-on').toggle();
        $('#d-008-off').toggle();
        $('#d-008-off-focus').focus();
    });

    // 2 extra for growth
    $('#b-009').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');
        //$('#d-009-off').hide('slow');$('#d-009-on').show('slow');
        $('#d-010-off').hide('slow');$('#d-010-on').show('slow');

        $('#d-009-on').toggle();
        $('#d-009-off').toggle();
        $('#d-009-off-focus').focus();
    });
    $('#b-010').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');
        $('#d-009-off').hide('slow');$('#d-009-on').show('slow');
        //$('#d-010-off').hide('slow');$('#d-010-on').show('slow');

        $('#d-010-on').toggle();
        $('#d-010-off').toggle();
        $('#d-010-off-focus').focus();
    });
})
</script>

<div class="content-wrapper">
    <div class="icons"><a id="b-001"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-001-on">Northside</div>
        <div class="hide" id="d-001-off"><input class="textbox" id="d-001-off-focus" name="d-001-off" maxlength="50" type="text" value="Northside" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('001');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-002"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-002-on">South Lawn</div>
        <div class="hide" id="d-002-off"><input class="textbox" id="d-002-off-focus" name="d-002-off" maxlength="50" type="text" value="South Lawn" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('002');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-003"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-003-on">East Wing</div>
        <div class="hide" id="d-003-off"><input class="textbox" id="d-003-off-focus" name="d-003-off" maxlength="50" type="text" value="East Wing" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('003');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-004"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-004-on">West Wing</div>
        <div class="hide" id="d-004-off"><input class="textbox" id="d-004-off-focus" name="d-004-off" maxlength="50" type="text" value="West Wing" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('004');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-005"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-005-on">Lobby</div>
        <div class="hide" id="d-005-off"><input class="textbox" id="d-005-off-focus" name="d-005-off" maxlength="50" type="text" value="Lobby" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('005');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-006"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-006-on">Ground Floor</div>
        <div class="hide" id="d-006-off"><input class="textbox" id="d-006-off-focus" name="d-006-off" maxlength="50" type="text" value="Ground Floor" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('006');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-007"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-007-on">TBD</div>
        <div class="hide" id="d-007-off"><input class="textbox" id="d-007-off-focus" name="d-007-off" maxlength="50" type="text" value="TBD" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('007');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

    <div class="icons"><a id="b-008"><img src="images/add.png" alt="Add button" class="button" title="Add" /></a></div>
    <div class="content">
        <div class="show" id="d-008-on">Add a new location</div>
        <div class="hide" id="d-008-off"><input class="textbox" id="d-008-off-focus" name="d-008-off" maxlength="50" type="text" value="" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('insert');$('#location').val('008');" title="Add" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-14T04:24:26+00:00

DEMO — Sorry to say this, but your code is poor.

Following is the jQuery replacement without changing any of your HTML, except for wrapping the “Add a new location” row with <div class="content-wrapper"></div>.

$('.icons a').on('click', function(){
    var $contentWrapper = $(this).closest('.content-wrapper');
    var $siblings = $contentWrapper.siblings('.content-wrapper');
    $siblings.find('.hide').hide('slow');
    $siblings.find('.show').show('slow');
    $contentWrapper.find('.show').toggle();
    $contentWrapper.find('.hide').toggle().find('.textbox').focus();
});

Don’t forget to wrap the above jQuery in $(function(){ ... }); so that it only executes once the DOM is ready.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have a web page with some jQuery code. Right now I am hardcoding

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply