Question

Having an issue here. This should be working… I have 4 elements in html that look like this

    <!-- Light Color Scheme - Header False and Show Faces True -->
        <div class="fb-like-box h-f_dsf-t visible" data-href="http://www.facebook.com/pages/Alpine-Adaptive-Scholarship-Program/344942928870040?fref=ts" data-width="292" data-show-faces="true" data-stream="true" data-header="false" colorscheme="light"></div>

Although they are in different variations. So one could be header true and show faces true and the unique class would be “.h-t_dsf-t”. The javascript should pick between them and tell which one is active and which one isn’t. So only one has the .visible class at a time and the others have a .invisible class.

Thanks in advance!

My Javascript For The Show Faces Button (note .sf-no.click doesn’t have anything in it yet but it will in the future I was just trying to get it to work for the yes button first.)

// Show Faces
$(document).ready(function() {
    $('.sf-yes').click(
        function() {
            $('.sf-yes').removeClass('btn-not-active btn-active').addClass('btn-active');
            $('.sf-no').removeClass('btn-not-active btn-active').addClass('btn-not-active');
            // Show Faces Yes &&& Show Header No
            if ($('.sf-yes.sh-no').hasClass('.btn-active')) {
                $('.h-f_dsf-t').removeClass('.invisible').addClass('.visible');
                $('.visible').removeClass('.visible').addClass('.invisible');
            }
            // Show Faces Yes &&& Show Header Yes
            if ($('.sf-yes.sh-yes').hasClass('.btn-active')) {
                $('.visible').removeClass('.visible').addClass('.invisible');
                $('.h-t_dsf-t').removeClass('.invisible').addClass('.visible');
            }
            // Show Faces No &&& Show Header Yes
            if ($('.sf-no.sh-yes').hasClass('.btn-active')) {
                $('.visible').removeClass('.visible').addClass('.invisible');
                $('.h-t_dsf-f').removeClass('.invisible').addClass('.visible');
            }
            // Show Faces No &&& Show Header No
            if ($('.sf-no.sh-no').hasClass('.btn-active')) {
                $('.visible').removeClass('.visible').addClass('.invisible');
                $('.h-f_dsf-f').removeClass('.invisible').addClass('.visible');
            }
        }
    );
    $('.sf-no').click(
        function() {
            $('.sf-no').removeClass('btn-not-active btn-active').addClass('btn-active');
            $('.sf-yes').removeClass('btn-not-active btn-active').addClass('btn-not-active');
        }
    );
});

Answer 1

.hasClass('.btn-active')

should be

.hasClass('btn-active')

without dot .