Row and Tile View list with jquery

Question

what i'm trying to do is create two buttons; one button shows a tile view of data and the other shows a row view of data. I have the code set up to be like this:

    dl = $('.data-list'),
    sr = $('.sort-row'),
    st = $('.sort-tile');

    //add cursor to tile icon default
    st.addClass('active-tile').css({'cursor':'default'});
    //add tile class to data-list
    dl.addClass('tile');

    //add tile class and remove row
    st.click(function() {
        if ($(this).hasClass('active-tile')){
            $(this).removeClass('active-tile').css({'cursor':'pointer'});
            dl.hide().addClass('row').removeClass('tile').fadeIn();
            sr.addclass('active-row');
        } else {
            $(this).addClass('active-tile').css({'cursor':'default'});
            sr.removeClass('active-row');
            dl.hide().addClass('tile').removeClass('row').fadeIn().css('display','block');
        }
    });
    //add row class and remove tile
    sr.click(function() {
        if ($(this).hasClass('active-row')){
            $(this).removeClass('active-row').css({'cursor':'pointer'});
            dl.hide().addClass('tile').removeClass('row').fadeIn();
            st.addclass('active-tile');
        } else {
            $(this).addClass('active-row').css({'cursor':'default'});
            st.removeClass('active-tile');
            dl.hide().addClass('row').removeClass('tile').fadeIn().css('display','block');
        }
    });

HTML:

    <div class="sort-bar fr">
        <span class="sort-tile">Columns</span>
        <span class="sort-row">Rows</span>
    </div>
    <div class="data-list">
            <section></section>
            <section></section>
    </div>

I have it set up that it hides the data list for a moment so the class can be added, and then I add row to change the style of the data.

My original point for this is I'm not entirely sure how to disable the tile button while row is active, or vice versa. I tried using unbind, but that appears to permanently disable both buttons. The other part is, there's a lot of code there, and I feel like I'm not necessarily doing this efficiently. Any suggestions on how to cut down on code would be greatly appreciated. I feel like toggleclass would be a good use here, but I'm not entirely sure where to go with it.

EDIT: Someone asked for a jsfiddle, I posted one with the simple stuff working: http://jsfiddle.net/wtyxd/3/

EDIT: Notice that if you click on each it remove the active from the other button, but if you click on it again, it removes active from that as well and doesn't show active for either? I'm trying to solve that.

Answer 1

Actually this appears to be what I needed. I solved it.

st.click(function() {

        if (!$(this).hasClass('active')){
            $(this).addClass('active');
            sr.removeClass('active');
            dl.fadeOut(200, function() {
                $(this).addClass('tile').removeClass('row').fadeIn(600)
            });
        }
    });
    //add row class and remove tile
    sr.click(function() {
        if (!$(this).hasClass('active')){
            $(this).addClass('active');
            st.removeClass('active');
            dl.fadeOut(200, function() {
                $(this).addClass('row').removeClass('tile').fadeIn(600)
            });
        }
    });