Geek Answers Handbook

Jquery.find () method will not work

Well, I'm trying to make a sort of caving button, because when I press the button twice, the rotation function no longer works.

I am not sure if this does not work .find (), 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();
        }
    });
});
+4
source share
5 answers

This plugin that you use turns the original tag <img>into <canvas>. You can make your code like this:

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

Personally, I would look for the best plugin.

+3
source

Pure CSS twist 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

+3
source 
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();
        }
    });
});
===================================================
+2

info img . , info -

$(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();
        }
    });
});
+2

css , 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)');
            }
        });
    });
0

More articles:


All Articles