Jquery Toggle/show Hide

March 26, 2024 Post a Comment

I have following markup which is generated dynamically using C# in my asp.net MVC2 application. There could be more rows depending on data in database. I have shown two rows. one i

Solution 1:

I think you may run into problems having multiple elements with the same ID, and it will certainly confuse you in the future.

My suggestion is to use classes instead. Small difference in your markup but big difference in semantics/intent.

Then, you could write simple jQuery code as the click events for your buttons (this goes in your document.ready):

$("#update").click(function() {
    $(".edit").show();
    $(".view").hide();
}

and so on.

Solution 2:

So, assuming you make the following changes:

Wrap your rows in <td> cells to conform to a table format.
Use class names instead of IDs (as I mentioned in a comment, an ID must be unique across the entire page).
fix your anchor tags to include some form of text.

(Some of these may just be becuase you posted a demo snippet, I'm not sure). Then, I made a couple of adjustments like made the cancel a link instead of an image, but an image will work.

<table><trclass="view"><td><aclass="toggle"class="icon-button"href="#">Edit</a></td></tr><trclass="edit"style="display:none"><td><imgclass="update"alt="Update"src="/static/images/update.png"><aclass="cancel"href="#">Cancel</a></td></tr><trclass="view"><td><aclass="toggle"class="icon-button"href="#">Edit</a></td></tr><trclass="edit"style="display:none"><td><imgclass="update"alt="Update"src="/static/images/update.png"><aclass="cancel"href="#">Cancel</a></td></tr></table>

Then the following will work (with jQuery):

Baca Juga

$('.toggle').click(function(){
    var $tr = $(this).closest('tr');
    $tr.add($tr.next('.edit')).toggle();
});
$('.cancel').click(function(){
    var $tr = $(this).closest('tr');
    $tr.add($tr.prev('.view')).toggle();
});

DEMO

Solution 3:

why dont you use jquery .toggle itself http://api.jquery.com/toggle/

Solution 4:

Yes, your rows will need classes. Then you can toggle your rows like this:

$('.view,.edit').toggle();

<table>
<trid="view" class="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<trid="edit" class="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
<trid="view" class="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<trid="edit" class="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
</table>

Solution 5:

You had a javascript issue.

Try This:

<html><head><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script></head><body><table><tr><td><aclass="toggle"href="#">Toggle</a></td></tr><trstyle="display:none"><td><imgclass="update"alt="Update"src="/static/images/update.png" /><imgclass="cancel"alt="cancel"src="/static/images/cancel.png" /></td></tr><tr><td><aclass="toggle"href="#">Toggle</a></td></tr><trstyle="display:none"><td><imgclass="update"alt="Update"src="/static/images/update.png" /><imgclass="cancel"alt="cancel"src="/static/images/cancel.png" /></td></tr></table></body></html><scripttype="text/javascript">
    $(document).ready(function() {
        $(".toggle").click(function(){
            $(this).parents("tr:first").next().toggle();
        });
        $(".cancel").click(function(){
            $(this).parents("tr:first").prev().toggle();
        });
    });
</script>

JavaScript Sample