CODEWITHSUNDEEP
jqueryhtmlcss
Ana
Ana

Reputation: 45

Turn toggleClass off when element is clicked a second time

I am new to writing JQuery and am having an issue with my toggleClass function. I wrote a simple function that changes the styling of an element when it is selected. Then, when another element is selected the styling is removed from the previous element and placed on the new one. That is working. My issue is when you click on the element that currently has the styling a second time, the styling is not removed. I want the styling to be removed when the element is clicked a second time. I pasted the code below but you can can see a working example in jsfiddle: http://jsfiddle.net/Ana32/pumyjgev/

Thank you!

HTML

<div class="portfolio">


                    <div class="portfoliowork photochange">

                        <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc4">
                    </div>


                    <div class="portfoliowork photochange">

                        <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc5">
                    </div>

                    <div class="portfoliowork photochange">
                        <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc6">
                    </div>

                    <div class="whowearetext toggledesc toggledesc4">
                        <h4>Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
</p>
                    </div>

                <div class="whowearetext toggledesc toggledesc5">
                        <h4>Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
</p>
                    </div>


                    <div class="whowearetext toggledesc toggledesc6">
                        <h4>Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
</p>
                    </div>
                        </div>

CSS

.photochange h4{
    display:none;
}

.teamchange h4{
    display:block;
    z-index: 50;
    float: left;
    position: absolute;
}


.teamchange img{
z-index: -10;
    border:5px solid #7bc32b;
}

JS

    $('.stylingchange').click(function(){
    $('.wwaiconchange').removeClass('wwaiconchange');
    $(this).toggleClass('wwaiconchange');
})



    $('.photochange').click(function(){
        $('.teamchange').removeClass('teamchange');
        $(this).toggleClass('teamchange');

    });


$('img[data-char=togglephoto1]')
    $(function(){
        $('.toggledesc').hide();

        $('.togglephoto').on('click', function(){
            var toggleid = $(this).attr('data-toggleid');
            $('.toggledesc').not('.' +toggleid).slideUp("slow");
            $('.' +toggleid).slideToggle("slow");
        });

    });

Upvotes: 1

Views: 31

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337627

The logic in your .photochange click handler is the issue. First you remove the class from all elements, then toggle it back on for the one which was clicked. This means that the clicked on can only ever be in the 'on' state.

Instead, toggle the class on the clicked element, but only remove it from the siblings() of that element:

$('.photochange').click(function () {
    $(this).toggleClass('teamchange').siblings().removeClass('teamchange');
});

Updated fiddle

Also note that I tidied your code in the fiddle slightly, as you had created an unused jQuery object, and had a nested DOMReady handler.

Upvotes: 3

Related Questions