Reputation: 6612
I have a link which retrieves data and shows all details, which works fine. However, I want it to act like a toggle, where it removes the details after a second click. It also should not send the ajax request to the server.
Maybe some state should be saved to know to either show the details or remove them? What is the best way to do this? This is the link:
= link_to "details", testitemlogs_path(testitem_id: testitem.id), remote: true
Upvotes: 0
Views: 94
Reputation: 2434
I think you can do it with little javascript.
= link_to "details", testitemlogs_path(testitem_id: testitem.id), remote: true , id:'details-button'
$('#details-button').click(function(e){
if($(this).hasClass('data-fetched')) {
$('#target_div_id').remove(); //You can do whatever you want like hide or remove it from page
e.preventDefault();
e.stopPropagation();
}
$(this).toggleClass('data-fetched');
});
This script toggle data-fetched
class on the anchor and check if that class exists then dont fetch data and hide/remove the target div.
Change target_div_id
with actual container id which you wanna hide
Upvotes: 1
Reputation: 6749
I think this can be done with the help of jQuery/Javascript.
Initially, you can show the link_to
button as you are having right now on page load.
By clicking on the link_to
, you should also hide the current link_to
button and show another button with different id.
Then by clicking on the other button, you can hide the details form of your page.
Upvotes: 0