Jquery trigger only on small window

Question

I have simple toggle div. I need on the big screens paragraph content open when hover, and on the small screens when click. I try to do like this:

HTML:

<div class="container">
    <div class="headline">Headline exaple</div>
    <p class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quia nulla, rem harum, minima sint assumenda perferendis cupiditate rerum corporis obcaecati, quam natus repudiandae veniam dolor. Maiores commodi sequi, esse.
    </p>
</div>

CSS:

.container {
    width: 400px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.headline {
    background: #ccc;
    padding: 5px;
    cursor: pointer;
}

.headline:hover + .content {
    display: block;
}

.content {
    padding: 5px;
    display: none;
}

jQuery:

var isSmallWindow;
$(window).on('resize', function() {
    isSmallWindow = $(this).width() < 768;
});

$('.headline').on('click', function() {
    if (isSmallWindow) {
        $('.content').slideToggle(300);
    }
});

But it does not work properly. When I change the window size content is still open when hover. I clicked on the headline and when I return window of its original position, then hover not working. How to solves this problem?

rajatha · Answer 1 · Aug 4, 2022

You have the :hover pseudo on your CSS. While this exists, the behaviour persists.

You can add a .small-window class to your <html> tag and control it with that.

https://jsfiddle.net/9a1n8xtw/4/

$(window).on('resize', function() {
    isSmallWindow = $(this).width() < 768;
    if(isSmallWindow) {
        $('html').addClass('small-window');
    }else {
        $('html').removeClass('small-window');
    }
});

And the css

html:not(.small-window) .headline:hover + .content {
    display: block;
}

answered Aug 4, 2022 by rajatha
• 7,680 points

Jquery trigger only on small window

Your comment on this question:

1 answer to this question.

Your answer

Your comment on this answer:

Related Questions In Web Development

how to trigger on jquery.smart wizard Finish button?

Date range picker on jquery ui datepicker

Why use jQuery on() instead of click()

How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

What is jQuery?

Error: Global Variable is not accessable to local function

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Uncaught Error: Bootstrap's JavaScript requires jQuery

Jquery pickatime, Drop down window not closing after on change event

Triggering jQuery on an opener window

Subscribe to our Newsletter, and get personalized recommendations.

TRENDING CERTIFICATION COURSES

TRENDING MASTERS COURSES

COMPANY

WORK WITH US

DOWNLOAD APP

CATEGORIES

CATEGORIES

TRENDING BLOG ARTICLES

TRENDING BLOG ARTICLES