Jquery trigger only on small window

0 votes

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?

Aug 3, 2022 in Web Development by gaurav
• 23,260 points
666 views

1 answer to this question.

0 votes

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,640 points

Related Questions In Web Development

0 votes
0 answers

how to trigger on jquery.smart wizard Finish button?

Iam very new in jquery. here is ...READ MORE

Jul 19, 2022 in Web Development by gaurav
• 23,260 points
2,094 views
0 votes
1 answer

Date range picker on jquery ui datepicker

Thanks I need this kind of code. ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,640 points
4,249 views
0 votes
1 answer

Why use jQuery on() instead of click()

The . on() method attaches event handlers to ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,640 points
234 views
0 votes
1 answer

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

The jQuery fadeIn() method is used to ...READ MORE

answered Jun 29, 2022 in Web Development by rajatha
• 7,640 points
983 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
973 views
0 votes
1 answer

Error: Global Variable is not accessable to local function

Hey kartik, A variable declared outside a function has a ...READ MORE

answered Feb 19, 2020 in PHP by Niroj
• 82,880 points
826 views
0 votes
1 answer

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

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
14,124 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
22,371 views
0 votes
1 answer

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

Maybe your input element falls within label ...READ MORE

answered Aug 2, 2022 in Web Development by rajatha
• 7,640 points
377 views
0 votes
1 answer

Triggering jQuery on an opener window

try: window.opener.$('.abc').trigger('click') READ MORE

answered Aug 4, 2022 in Web Development by rajatha
• 7,640 points
803 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP