CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Online User
Online User

Reputation: 17808

How to change a button's style?

I have a subscribe button, once it is clicked (and subscribed successfully) ; I want my code to show directly unsubscribe. So, I set two different div's for each button, and I thought 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}

So, basically what I'm looking for is changing the id of the div from subscribe_everything to unsubscribe_everything once the user clicks on subscribe (or the opposite). This is the function being called by onclick:

function subscriber(user,type,result_cont)
    {
            $.post(page, 
        {   
            mode : type,
            subscribe_to : user
        },
        function(data)
        {
            if(!data)
                alert("No data");
            else
            {
            }
        },'text');
    }

I have a suspicion that we can need to use the toggle function of jquery (and toggle the id's) but I don't know where to add it and how. I'm looking also for a fast way, I don't want to bore the customer with 10 seconds for the div to toggle.

Upvotes: 0

Views: 190

Answers (2)

Simon Jentsch
Simon Jentsch

Reputation: 717

You can do this with a simple if/else clause and the jQuery .attr() function. There are two ways you can do this, by selecting the parent of the link or the better way: adding a class to the div element with the id (like subscribe-button).

The way with the class can be done like this:

if ($('.subscribe-button').attr('id') == 'subscribe_everything') {
    $('.subscribe-button').attr('id', 'unsubscribe_everything');
} else {
    $('.subscribe-button').attr('id', 'subscribe_everything');
}

if you want to do it with classNames, do it like this:

if ($('#subscribe_everything').hasClass('subscribed')) {
    $('#subscribe_everything').removeClass('subscribed');
} else {
    $('#subscribe_everything').addClass('subscribed');
}

Or use the toggleClass function, like user3895968 suggested:

$('#subscribe_everything').toggleClass('subscribed');

That way you don't have to add a new class or remove it (if unsubscribed) to the div element.

Upvotes: 1

Swaraj
Swaraj

Reputation: 383

Changing id might not be helpful in long run.

You can always use the toggleClass to change the class attribute onclick event

Upvotes: 0

Related Questions