CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ExuberantArtichoke
ExuberantArtichoke

Reputation: 55

jquery .find() method won't work

Well I'm trying to make a sort of a collapse button, thing is when I press the button twice, the rotate function won't work anymore.

I'm not sure if it's the .find() method that isn't working or the rotate function itself.

Here's the jsfiddle link:

http://jsfiddle.net/XgX5m/2/

HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js"></script>
<div class="info">
            <div>
                <div class="title">
                    <div><img src="http://i.imgur.com/phLHqY3.png"/></div>
                    <div>Lorem Ipsum</div>
                </div>
                <div class="infot">
                    Teckentrup - seit über 80 Jahren am Markt - ist bis heute der einzige unter den führenden Anbietern von Türen und Toren, der vom Brandschutz kommt. Wir haben nicht nur die gesamte Entwicklung in diesem Bereich mitgeprägt und begleitet. Die hohen Sicherheitsanforderungen standen auch Pate, als wir umfangreiche Kompetenzen in weiteren Feldern der Funktionstüren aufgebaut haben.
                </div>
            </div>
            <div>
                <div class="title">
                    <div><img src="http://i.imgur.com/phLHqY3.png"/></div>
                    <div>Lorem Ipsum</div>
                </div>
                <div class="infot">
                    Teckentrup - seit über 80 Jahren am Markt - ist bis heute der einzige unter den führenden Anbietern von Türen und Toren, der vom Brandschutz kommt. Wir haben nicht nur die gesamte Entwicklung in diesem Bereich mitgeprägt und begleitet. Die hohen Sicherheitsanforderungen standen auch Pate, als wir umfangreiche Kompetenzen in weiteren Feldern der Funktionstüren aufgebaut haben.
                </div>
            </div>
        </div>

CSS:

.info {
    margin:15px 30px;
    background:#fff;
    border-radius:2px;
    padding:20px;
}

.info .title {
    display:flex;
    font-size:22px;
    padding:5px 0;
    border-bottom:dashed 1px #C0C0C0;
}

.info .title:hover {
    cursor:pointer !important;
}
.info .title img {
    vertical-align:middle;
}

.info .infot {
    color:#9C9C9C;
    font-size:14px;
    padding:10px 0;
}

jQuery:

$(document).ready(function() {
    $('.info .infot').hide();
    $('.info .title').click(function() {
        if ($(this).siblings('.infot').is(':visible')) {
            $(this).siblings('.infot').slideUp('fast');
            $(this).find('img').rotateLeft();
        } else {
            $(this).siblings('.infot').slideDown('fast');
            $(this).find('img').rotateRight();
        }
    });
});

Upvotes: 4

Views: 202

Answers (5)

Nageshwari P
Nageshwari P

Reputation: 35

info is not a parent of img its grand parent . so, take child of info and child of info class child – 

$(document).ready(function() {
    $('.info .infot').hide();
    $('.info .title').click(function() {
        alert($(this).siblings('.infot').is(':visible'))
        if ($(this).siblings('.infot').is(':visible')) {
            $(this).siblings('.infot').slideUp('fast');
            $(this).children().children('canvas').css('transform', 'rotate(-90deg)');
        } else {
            $(this).siblings('.infot').slideDown('fast');
            $(this).children().children('img').rotateRight();
        }
    });
});

Upvotes: 2

Andrii Filenko
Andrii Filenko

Reputation: 984

You can use css for this, working DEMO

 $(document).ready(function() {
        $('.info .infot').hide();
        $('body').on('click','.info .title',function() {
            if ($(this).siblings('.infot').is(':visible')) {
                $(this).siblings('.infot').slideUp('fast');
                $(this).find('img').css('transform','rotate(0deg)');
            } else {
                $(this).siblings('.infot').slideDown('fast');
                $(this).find('img').css('transform','rotate(90deg)');
            }
        });
    });

Upvotes: 0

Sameer Rangrez
Sameer Rangrez

Reputation: 152

Please use below code on fiddle

When you are open accordion then image turn into canvas so at time of close accordion you can get image that already turn in canvas

=============================
$(document).ready(function() {
    $('.info .infot').hide();
    $('.info .title').click(function() {
        if ($(this).siblings('.infot').is(':visible')) {
            $(this).siblings('.infot').slideUp('fast');
            $(this).find('canvas').rotateLeft();
        } else {
            $(this).siblings('.infot').slideDown('fast');
            $(this).find('img,canvas').rotateRight();
        }
    });
});
===================================================

Upvotes: 2

vcanales
vcanales

Reputation: 1818

Pure CSS rotating, since you asked for a better alternative:

CSS:

img.rotateRight {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

JS:

$(document).ready(function() {
    $('.info .infot').hide();
    $('.info .title').click(function() {
        var img = $(this).find('img');
        if ($(this).siblings('.infot').is(':visible')) {
            $(this).siblings('.infot').slideUp('fast');
        } else {
            $(this).siblings('.infot').slideDown('fast');
        }
        img.toggleClass('rotateRight');
    });
});

DEMO

Upvotes: 3

Pointy
Pointy

Reputation: 413712

That plugin you're using turns the original <img> tag into a <canvas>. You can make your code work like this:

        $(this).find('img, canvas').rotateLeft();

Personally I would look for a better plugin.

Upvotes: 3

Related Questions