Upon clicking the subscribe button and successfully subscribing, I want to display an unsubscribe option in my code. To achieve this, I have created two separate divs for each button, thinking that we could toggle between them.
<div id ="subscribe_everything">
{if !$userquery->is_subscribed($u.userid)}
<a onclick="subscriber('{$u.userid}','subscribe_user','subscribe_result_cont')" class="yt-uix-subscription-button yt-can-buffer yt-uix-button yt-uix-button-subscribe-branded yt-uix-button-size-default yt-uix-button-has-icon" title="Subscribe To {$u.username}" >
<span class="subscribe-label" aria-label="Subscribe">
Subscribe
</span>
</a>
</div>
{else}
<div id ="unsubscribe_everything">
<button class="yt-uix-subscription-button yt-can-buffer yt-uix-button yt-uix-button-subscribed-branded yt-uix-button-size-default yt-uix-button-has-icon" onclick="subscriber('{$u.userid}','unsubscribe_user','subscribe_result_cont')" type="button" aria-role="button" aria-busy="false" >
<span class="subscribed-label" aria-label="Unsubscribe">
Subscribed
</span>
<span class="unsubscribe-label" aria-label="Unsubscribe">
Unsubscribe
</span>
</button>
</div>
{/if}
Essentially, I aim to switch the ID of the div from subscribe_everything to unsubscribe_everything when the user clicks on subscribe (or vice versa). The function called by onclick is as follows:
function subscriber(user,type,result_cont)
{
$.post(page,
{
mode : type,
subscribe_to : user
},
function(data)
{
if(!data)
alert("No data");
else
{
}
},'text');
}
I suspect that we may need to utilize jQuery's toggle function to switch the IDs, but I am unsure where and how to implement it. I also seek a quick solution, as I want to keep the user experience smooth without delays when toggling the div.