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 in Web Development by gaurav
• 17,580 points
11 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 by rajatha
• 7,040 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 in Web Development by gaurav
• 17,580 points
51 views
0 votes
1 answer

Date range picker on jquery ui datepicker

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

answered Jun 27 in Web Development by rajatha
• 7,040 points
53 views
0 votes
1 answer

Why use jQuery on() instead of click()

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

answered Jun 27 in Web Development by rajatha
• 7,040 points
10 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 in Web Development by rajatha
• 7,040 points
16 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,500 points
308 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,740 points
283 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,740 points
8,861 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,740 points
15,853 views
0 votes
1 answer
0 votes
1 answer

Triggering jQuery on an opener window

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

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