Question

I want to click a link and toggle between 2 blocks of content, within a list of content, to essentially go from displaying content to editing content.

I have the following snipits of code:

<style type="text/css">
    div.show {display:block;}
    input.hide {display:none;}
</style>

<script type="text/javascript">
    $(document).ready(function(){
        $('#d-01').on('click', function() {
            $('#d-01-on').toggle();
            $('#d-01-off').toggle();
            $('#d-01-off').focus();
        });
         $('#d-02').on('click', function() {
            $('#d-02-on').toggle();
            $('#d-02-off').toggle();
            $('#d-02-off').focus();
        });
        $('#d-99').on('click', function() {
            $('#d-99-on').toggle();
            $('#d-99-off').toggle();
            $('#d-99-off').focus();
        });
   })
</script>

<a href="#" id="d-01">edit</a>
<div class="show" id="d-01-on">Some content</div>
<input class="hide" id="d-01-off" name="d-01" value="Some content" />

<a href="#" id="d-02">edit</a>
<div class="show" id="d-02-on">Some content</div>
<input class="hide" id="d-02-off" name="d-02" value="Some content" />

<a href="#" id="d-99">edit</a>
<div class="show" id="d-99-on">Some content</div>
<input class="hide" id="d-99-off" name="d-99" value="Some content" />

This works, but I want to make my jquery/javascript code more dynamic and not hard coded. My MySQL table rows will grow over time and I don’t want to have to keep editing my script.

Is it possible to re-write the jquery code to dynamically handle the ID’s rather than having to create individual and redundant on('click', function()‘s?

Thanks for helping.

[see How to Toggle in jQuery for my initial question to this problem]

Answer 1

I’m not sure if I understanded what you want but here i go:

First add a div to wrap each repetive section of the HTML markup, in this example I added a class called content-wrapper to add the jquery click event easier:

<div class="content-wrapper">
    <a href="#" id="d-01">edit</a>
    <div class="show" id="d-01-on">Some content</div>
    <input class="hide" id="d-01-off" name="d-01" value="Some content" />
</div>

<div class="content-wrapper">
    <a href="#" id="d-02">edit</a>
    <div class="show" id="d-02-on">Some content</div>
    <input class="hide" id="d-02-off" name="d-02" value="Some content" />
</div>

<div class="content-wrapper">
    <a href="#" id="d-99">edit</a>
    <div class="show" id="d-03-on">Some content</div>
    <input class="hide" id="d-03-off" name="d-03" value="Some content" />
</div>

Then i modified the JS to the following code:

<script type="text/javascript">
    $(document).ready(function(){
        $('.content-wrapper a').on('click', function() {
            $(this).siblings().toggle();
            $(this).siblings('input').focus();
        });
   })
</script>

The JS adds a event to each anchor (a tag) inside the divs of content-wrapper, then when it is clicked, it checks for its siblings (the tags next to it like: div.show and the input) and toggles them. I added a filter in the second siblings to get only the input of the clicked anchor and focus it.

I didn’t test it but it should work.