It's repetition of code and wish to minimize jquery

Question

I have written jquery but there is repetition of code lines. I wish to minimize these lines of code. I haven't an idea how to do it? Can any one help me would be appreciated.

HTML

<div class="content-wrapper">
    <div class="publish-content">
        <div class="content-title">
            <h5>Publised content</h5>
            <span><img src="images/accordion-arrow.png" alt="down arrow"/></span>
        </div>
        <div class="content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><hr>
        </div>
    </div>

    <div class="upcoming-content">
        <div class="content-title">
            <h5>Upcoming content</h5>
            <span><img src="images/accordion-arrow.png" alt=" down arrow"/></span>
        </div>
        <div class="content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><hr>
        </div>
    </div>
</div><!--content section ends---------->

Please note: I have removed here html of future content.

jquery

$('.publish-content').click(function() {
    var clicks = $(this).data('clicks');
    if (clicks) {
        // odd clicks
        $(this).children('.content').slideUp();
        $(this).children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
    } else {
        // even clicks
        $(this).children('.content').slideDown();
        $(this).children('div:first').children('span').css({'transform' : 'rotate(90deg)'});
        $('.upcoming-content').children('.content').slideUp();
        $('.upcoming-content').children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
        $('.future-content').children('.content').slideUp();
        $('.future-content').children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
    }
    $(this).data("clicks", !clicks);
});
$('.upcoming-content').click(function() {
    var clicks = $(this).data('clicks');
    if (clicks) {
        // odd clicks
        $(this).children('.content').slideUp();
        $(this).children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
    } else {
        // even clicks
        $(this).children('.content').slideDown();
        $(this).children('div:first').children('span').css({'transform' : 'rotate(90deg)'});
        $('.publish-content').children('.content').slideUp();
        $('.publish-content').children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
        $('.future-content').children('.content').slideUp();
        $('.future-content').children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
    }
    $(this).data("clicks", !clicks);
});

Please note: I have removed here jquery of future content. That's it.

Possible duplicate of [Assigning more than one class for one event](https://stackoverflow.com/questions/10511897/assigning-more-than-one-class-for-one-event) — Gerard, Oct 09 '19 at 07:26
It would be easy for the community to help if you explain what are you actually trying to do — htmler, Oct 09 '19 at 08:09

score 1 · Answer 1 · answered Oct 09 '19 at 07:31

1

Just combine the function together

If the code is same in both click events:

$('.publish-content, .upcoming-content').click(function() {...});

If parts of code are same, go for functions: For eg:

function xyz(){
    $(this).children('.content').slideUp();
    $(this).children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
}

And then use xyz(); wherever you want to execute.

$('.publish-content').click(function() {
    var clicks = $(this).data('clicks');
    if (clicks) {
        // odd clicks
        xyz();
    } else {
        // even clicks
        $(this).children('.content').slideDown();
        $(this).children('div:first').children('span').css({'transform' : 'rotate(90deg)'});
        $('.upcoming-content').children('.content').slideUp();
        $('.upcoming-content').children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
        $('.future-content').children('.content').slideUp();
        $('.future-content').children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
    }
    $(this).data("clicks", !clicks);
});

Hope this helps!

answered Oct 09 '19 at 07:31

Harshit verma

506
3
25

It's great. I just used $('.publish-content, .upcoming-content').click(function() {...}); this. and removed upcoming-content and future-content code line from even clicks. It works well individually. But suppose publish-content is clicked and slide down, and on next second click on upcoming-content, publish-content should slide up and upcoming-content slide down. That's not happening here. Can you help me to solve this. Thanks for your suggestion. – ramesh.a Oct 09 '19 at 08:20
Like I told you in the second half of my answer, create small modules of the code to reuse it wherever you want. So I believe most of the line in both click events are same, cut all the lines to a function and call the function xyz() there with additional functionality what so ever. – Harshit verma Oct 09 '19 at 08:26
Thanks for your explanation. I tried but something goes wrong. Can you update your code exactly. – ramesh.a Oct 09 '19 at 13:03
I have already gave an example in the later part of my answer, I don't understand exactly what more you want – Harshit verma Oct 09 '19 at 19:48
Please Ignore it and thanks for your suggestions. I found solution and used jquery from here-. https://codepen.io/brenden/pen/Kwbpyj – ramesh.a Oct 10 '19 at 08:10

score 0 · Answer 2 · answered Oct 09 '19 at 07:25

You can use comma to bind click event handler for multiple elements. user attr('class') to get the class name and use it in your script. this way you can generalize the script and minimize your code

$('.publish-content, .upcoming-content').click(function() {
    var className = $(this).attr('class');
    var clicks = $(this).data('clicks');
    if (clicks) {
        // odd clicks
        $(this).children('.content').slideUp();
        $(this).children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
    } else {
        // even clicks
        $(this).children('.content').slideDown();
        $(this).children('div:first').children('span').css({'transform' : 'rotate(90deg)'});
        $('.' + className).children('.content').slideUp();
        $('.' + className).children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
        $('.future-content').children('.content').slideUp();
        $('.future-content').children('div:first').children('span').css({'transform' : 'rotate(0deg)'});
    }
    $(this).data("clicks", !clicks);
});

It's repetition of code and wish to minimize jquery

2 Answers2