I'm new to jQuery and I'd like to add a class to an individual image by hovering over a button - something I thought I knew how to do, turns out I don't.
The problem being I have several .service sections, each with their own .service button. Therefore, the end result is as expected: when I hover over the button, ALL the .service-image are affected. I thought I could resolve this by using $(this) or find() but I just cant figure it out...
$(".service button").hover(function() {
$(".service-image").toggleClass("raise");
});
.raise {
transform: translateY(-10px);
transition: all 0.2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service home-service1">
<div class="service-image">
<img src="images/phone.png" alt="" />
</div>
<div class="service-title">
<h2>Kiosk Renovation</h2>
</div>
<div class="service-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat quam sit amet vehicula auctor. Aliquam vel orci hendrerit, vestibulum ligula laoreet, faucibus mi.</p>
</div>
<button class="outline-on-dark">Explore</button>
</div>
Since the <button> element is a sibling of the .service-image you're trying to target (i.e. they both share the same .service parent), you can use siblings(). By specifying the .service-image selector in the siblings() function, you can be sure to only ever target the .service-image inside of the .service element.
$('.service button').hover(function() {
$(this).siblings('.service-image').toggleClass('raise');
});
.raise {
transform: translateY(-10px);
transition: all 0.2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service home-service1">
<div class="service-image">
<img src="images/phone.png" alt="" />
</div>
<div class="service-title">
<h2>Kiosk Renovation</h2>
</div>
<div class="service-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat quam sit amet vehicula auctor. Aliquam vel orci hendrerit, vestibulum ligula laoreet, faucibus mi.</p>
</div>
<button class="outline-on-dark">Explore</button>
</div>
Try:
$('service button').on('hover', function(e){
$(this).siblings('.service-image').toggleClass('raise');
});
Your thinking was right, as both button and specific image share the same parent.
Related
I'm am trying to make multiple boxes, which can expand onclick and close again when clicking on the X. Well first off, the close jquery doesn't work, but that isn't the main thing I'am looking fore, how can I optimize the code, so doesn't become 400-600 hundred lines of the same, just for each box/element.
When click on one box/element, it should expand and so should the content inside - in the order as they come. Then it can be closed again an you would be able to click on another element with the same result - using pretty much the same code.
How can I make the site know, which element has bin click on.
Thanks in advance :)
$(document).ready(function(){
$( ".calendarBox" ).click(function() {
$(".calendarBox").addClass("calendarBoxOpen").delay(2000);
$(".dateTitle").addClass("dateTitleOpen");
$(".dateMonthBox").addClass("dateMonthBoxOpen");
$(".closeMonth").addClass("showMonth");
$(".dateDayBox").addClass("dateDayBoxOpen");
$(".closeDay").addClass("showDay");
$(".dateCloseBtnBox").addClass("dateOpenBtnBox");
$(".closeHr").addClass("showHr");
$(".dayActivitiesInfo").addClass("dayActivitiesInfoOpned");
$(".dayInfoTxt_1May").addClass("dayInfoTxt_1MayOpen");
$(".dayInfoBtnBox_1Maj").addClass("dayInfoBtnBox_1MajOpen");
});
});
$(document).ready(function(){
$( ".dateCloseBtn" ).click(function() {
$(".dayInfoBtnBox_1Maj").removeClass("dayInfoBtnBox_1MajOpen");
$(".dayInfoTxt_1May").removeClass("dayInfoTxt_1MayOpen");
$(".dayActivitiesInfo").removeClass("dayActivitiesInfoOpned");
$(".closeHr").removeClass("showHr");
$(".dateCloseBtnBox").removeClass("dateOpenBtnBox");
$(".closeDay").removeClass("showDay");
$(".dateDayBox").removeClass("dateDayBoxOpen");
$(".closeMonth").removeClass("showMonth");
$(".dateMonthBox").removeClass("dateMonthBoxOpen");
$(".dateTitle").removeClass("dateTitleOpen");
$(".calendarBox").removeClass("calendarBoxOpen");
});
});
.calendarBox { /*This is when closed*/
width:14.28571428571428%;
border:0.5px solid #000;
height:100%;
transition-duration:1s;
}
.calendarBox:hover {
background-color:#8abcc2;
}
.calendarBoxOpen { /*This is when opened*/
width:57.14285714285712%;
}
.calendarDate {
}
.calendarHeader {
display:flex;
}
.dateTitle { /*This is when closed*/
margin-left:15px;
display:none;
transition:ease-in-out;
transition-duration:1s;
}
.dateTitleOpen { /*This is when opened*/
display:block;
}
.dateDayMonthBox {
width:100%;
}
.dateMonthBox { /*This is when closed*/
display:inline-flex;
float:right;
}
.dateMonthBoxOpen { /*This is when Opened*/
margin-left:25px;
}
.closeMonth { /*This is when closed*/
display:none;
}
.showMonth { /*This is when opened*/
display:block;
}
.dateDayBox { /*This is when closed*/
display:inline-flex;
float:left;/*This is when open*/
}
.dateDayBoxOpen { /*This is when opened*/
float:right;
}
.closeDay { /*This is when closed*/
display:none;
}
.showDay { /*This is when opened*/
display:block;
}
.dateCloseBtnBox { /*This is when date is closed*/
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
margin-left:25px;
margin-right:5px;
display:none;
}
.dateOpenBtnBox { /*This is visible, when date open*/
display:block;
}
.dateCloseBtn {
}
.closeHr { /*This is when closed*/
display:none;
}
.showHr { /*This is when opened*/
display:block;
}
/*====Content of the calendar day=====*/
.dateDayInformationBox {
}
.dateDayInformation {
width:100%;
display:inline-flex;
overflow-y:hidden;
}
.dayActivitiesInfo { /*This is when closed*/
height:18px;
width:100%;
margin-left: 15px;
padding-left: 10px;
list-style-type:none;
border-left:2.5px solid purple;
}
.dayActivitiesInfoOpned { /*This is when opened*/
height:100%;
width:50%;
margin-left: 15px;
padding-left: 10px;
list-style-type:none;
border-left:2.5px solid purple;
}
/*====The txt======*/
.dayInfoTitel_1May {
}
.dayInfoTxt_1May { /*This is when closed*/
display:none;
}
.dayInfoTxt_1MayOpen { /*This is when opened*/
display:block;
}
.dayInfoBtnBox_1Maj { /*This is when closed*/
display:none;
}
.dayInfoBtnBox_1MajOpen { /*This is when opened*/
text-align: center;
margin: auto;
display:block;
}
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendarBox">
<div class="calendarDate">
<div class="calendarHeader">
<h3 class="dateTitle">Information</h3>
<div class="dateDayMonthBox">
<div class="dateMonthBox"><h4 class="">1</h4><h4 class="closeMonth">.Maj</h4></div> <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
</div>
<div class="dateCloseBtnBox">
<div class="dateCloseBtn">close</div>
</div><!--The clouse btn-->
</div>
<hr class="closeHr">
<div class="dateDayInformationBox">
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------><div class="close">
close
</div>
<div class="calendarBox" onclick="animateDayOpen_1Maj">
<div class="calendarDate">
<div class="calendarHeader">
<h3 class="dateTitle">Information</h3>
<div class="dateDayMonthBox">
<div class="dateMonthBox"><h4 class="">2</h4><h4 class="closeMonth">.Maj</h4></div> <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
</div>
<div class="dateCloseBtnBox" onclick="animateDayClose_1Maj">
<div class="dateCloseBtn">X</div>
</div><!--The clouse btn-->
</div>
<hr class="closeHr">
<div class="dateDayInformationBox">
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
</div>
</div>
</div>
So, you have multiple boxes that you want to expand/shrink on click. You can give all that boxes one class - boxExpandable for expample, with initial width. Then user clicks on boxExpandable - you should toggle .expanded class with higher width.
If you want some content to be shown only when box is expanded - wrap it in .showWhenExpanded class, like shown below.
$(document).ready(function(){
$('.expandableBox').on('click', function(){
$(this).toggleClass('expanded');
});
});
.box {
margin-bottom: 10px;
padding: 15px;
width: 40%;
border: solid 5px goldenrod;
transition: background-color .4s, width .4s;
}
.box:hover {
background-color: #32cd32;
}
.box.expanded {
width: 80%;
}
.showWhenExpanded {
display: none;
}
.box.expanded .showWhenExpanded {
display: inline-block;
}
<script src="//code.jquery.com/jquery.js"></script>
<div class="content">
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
</div>
See this codepen
I am using slick slider which has a functionality similar to this [Slick sync slider]. I am unable to add any animations to it. I want the image to appear from the left and text to appear from the right like this-second slide.
I tried adding animate.css and using data-animated="fadeInLeft", but that is loading all the slides at the same time and above all, it is not serving the purpose.
Is there an option where i can add animation using JS or CSS?
$('.slider-quote-block').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-image-block'
});
$('.slider-image-block').slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.slider-quote-block',
dots: false
});
.testimonial {
img {
position:relative;
}
figcaption {
position: absolute;
bottom: 35px;
left:0px;
z-index: 1;
h5 {
color: white;
font-size: 16px;
padding: 0px 38px;
position: relative;
display: inline-block;
font-size: 22px;
font-family: $font-stack;
&:last-child {
font-size: 22px;
font-family: $font-arial;
padding-left:15px;
&:before {
content: "";
position: absolute;
background-color: $cabaret;
top: -5px;
left: -13px;
height: 35px;
width: 3px;
}
}
}
}
}
.slider-image-block, .slider-quote-block {
width:50%;
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section class="testimonial clearfix">
<!--image-->
<div class="slider-image-block">
<div class="image-overlay">
<img src="images/testimonial1.png" alt="slider-image 1">
<figcaption><h5>name</h5><h5>designation</h5></figcaption>
</div>
<div class="image-overlay">
<img src="images/testimonial1.png" alt="slider-image 2">
<figcaption><h5>name</h5><h5>designation</h5></figcaption>
</div>
<div class="image-overlay">
<img src="images/testimonial1.png" alt="slider-image 3">
<figcaption><h5>name</h5><h5>designation</h5></figcaption>
</div>
<div class="image-overlay">
<img src="images/testimonial1.png" alt="slider-image 4">
<figcaption><h5>name</h5><h5>designation</h5></figcaption>
</div>
<div class="image-overlay">
<img src="images/testimonial1.png" alt="slider-image 5">
<figcaption><h5>name</h5><h5>designation</h5></figcaption>
</div>
</div>
<!--quote-->
<div class="slider-quote-block">
<div class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
<div class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
<div class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
<div class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
<div class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
</div>
</section>
As far as I can tell, there is no built-in option in Slick to use a custom animation or transition. You could open an issue about this, although I am not sure if the author wants to support this.
Anyway, I found that if you really want to use Slick and want to have custom transitions, you can do it using a bit of a hack. I have cooked up a JSFiddle that demonstrates this. Hopefully this is what you wanted?
To make it so that part of a slide comes in from one side and part from the other side, I have used the options in Slick to step two slides at a time. In the custom event listener, these two slides are then given different animations to achieve the effect you are looking for.
The relevant code is the event listener in the following.
var slides = $('.slide');
$('.slick').slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 2,
speed: 0 // hack to disable Slick transitions
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
slides.removeClass('slideInLeft slideInRight');
// use custom transition
slides.eq(nextSlide).addClass('slideInLeft');
slides.eq(nextSlide + 1).addClass('slideInRight');
});
It is a combination of disabling Slick transitions by setting the speed to 0 and applying a custom transition in the event listener. AFAIK, there is currently no way to disable transitions in a nicer way, but that would of course be preferable. Another option would be to not use Slick at all, but I leave that up to you to decide.
EDIT: Changing the animation speed (JSFiddle) and using a synced slider (JSFiddle) can also be done, per request in comments. To make the slides appear as one slide in the navigation slider, some more CSS can be used (JSFiddle).
I hava a large amount of content which make up with html tag or pure text.
And I have several divs.
How to autofill the remain content to other divs when the first div cannot contain all contents.
Very thankful if any suggestion provided. :)
--- Update ---
Actually, I'm making my own blog which designed like an opened book(a left page and a right page) containing all posts.
Each post is written with a markdown file.Initially, one post has only a left page.
When the mardown file parsed to html code, I will try insert the result html code into 'left page' of my book-like post.
Obviously, If the result html code is huge, one 'left page' is not possible contain all content.On this occasion, my blog will automatically create a new 'right page'(or another 'left page' when the 'right page' is neither enough) which the remain content should autofilled in;
What I'm asking is how I can detect if my 'left page' div is not enough containing the all result html code.And how can I cut the remain content and insert into 'right page'.I totally have no idea how to reach this request.
So, If someone already did this before, maybe you can give me some tips.I'll be very thankful
EDITED again:
Ok I will make this out of pure CSS. What you are asking me in the comments is a normal post(on the left side) and if the left sided post is unable to hold all of its content then a copy of the post is revealed on the right side that can hold all of the original content of the old left side.
This is what I am understanding from the information you have given me.
#media (min-width: 601px) {
#leftSide {
float: left;
}
/*THIS IS ON THE LEFT SIDE*/
h2 {
font-size: 2.5em;
}
p {
font-size: 1.5em;
}
#rightSide {
display: none;
}
}
#media (max-width: 600px) {
#rightSide {
display: block;
float: right;
}
/*THIS IS ON THE RIGHT SIDE*/
h2 {
font-size: 1.5em;
}
p {
font-size: 1em;
}
#leftSide {
display: none;
}
<div id="leftSide">
<h2>Post 1</h2>
<p>
Lorem ipsum dolor sit amet,
<br />consectetur adipiscing elit.
<br />Maecenas tempor eget ante at
<br />maximus. Vestibulum sed nulla
<br />ex. Sed congue maximus lectus,
<br />vel scelerisque eros.
</p>
<h2>Post 2</h2>
<p>
Lorem ipsum dolor sit amet,
<br />consectetur adipiscing elit.
<br />Maecenas tempor eget ante at
<br />maximus. Vestibulum sed nulla
<br />ex. Sed congue maximus lectus,
<br />vel scelerisque eros.
</p>
<h2>Post 3</h2>
<p>
Lorem ipsum dolor sit amet,
<br />consectetur adipiscing elit.
<br />Maecenas tempor eget ante at
<br />maximus. Vestibulum sed nulla
<br />ex. Sed congue maximus lectus,
<br />vel scelerisque eros.
</p>
</div>
<div id="rightSide">
<h2>Post #1</h2>
<p>
Lorem ipsum dolor sit amet,
<br />consectetur adipiscing elit.
<br />Maecenas tempor eget ante at
<br />maximus. Vestibulum sed nulla
<br />ex. Sed congue maximus lectus,
<br />vel scelerisque eros.
</p>
<h2>Post #2</h2>
<p>
Lorem ipsum dolor sit amet,
<br />consectetur adipiscing elit.
<br />Maecenas tempor eget ante at
<br />maximus. Vestibulum sed nulla
<br />ex. Sed congue maximus lectus,
<br />vel scelerisque eros.
</p>
<h2>Post #3</h2>
<p>
Lorem ipsum dolor sit amet,
<br />consectetur adipiscing elit.
<br />Maecenas tempor eget ante at
<br />maximus. Vestibulum sed nulla
<br />ex. Sed congue maximus lectus,
<br />vel scelerisque eros.
</p>
</div>
Here an answer to a question like yours.
I think you could divide your text in segments, each of a certain number of characters but without cutting any word.
Then you could put the first segment in the first page, the second on second page and so on...
The main problem is to trim yourBigText without cut any words, and here the solution I found on the other post helps.
var yourBigText = "CULIACAN, Mexico The Joaquin El Chapo Guzman story could hardly have seemed more unbelievable, with its multiple prison breaks, endless sewers and tunnels, outlandish sums of money and feverish manhunts. And then Sean Penn entered the story.While Guzman was the world's most-wanted fugitive, dodging Mexican military operations and U.S. Drug Enforcement Administration surveillance, he was secretly meeting with the Hollywood movie star in an undisclosed Mexican hideout and has now provided what appears to be the first public interview of his drug-running career, published Saturday by Rolling Stone."; //replace with your big text.
var cutLength;
var remainText = yourBigText.length;
var maxLength = 60;
while (remainText != 0) {
if (remainText >= maxLength) {
var trimmedText = yourBigText.substr(0, maxLength);
//re-trim if we are in the middle of a word
trimmedText = trimmedText.substr(0, Math.min(trimmedText.length, trimmedText.lastIndexOf(" ")));
//subtract from the original big string the length of the trimmedText
cutLength = trimmedText.length;
if (yourBigText.length > cutLength) {
yourBigText = yourBigText.slice(cutLength);
}
document.write(trimmedText);
document.write('<br>');
} else {
document.write(yourBigText);
exit();
}
remainText = yourBigText.length;
}
I hope this helps.
I was designing a website using bootstrap and there is a jumbotron on my page.
The jumbotron has a background image. How can I fade in the current background image of the jumbotron on hover?
means if I take the cursor on the jumbotron, another background image fades in and when I take the cursor out of the jumbotron, the previous picture comes back.
Here is my Jumbotron html:
<div class="jumbotron">
<div class="container">
<h1>Life is an Art.</h1>
<p style="font-size: 150%"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar nunc urna, non cursus enim ultricies in.</small></p>
<button type="button" class="btn btn-primary btn-lg">Learn More »</button>
</div>
</div>
CSS:
.jumbotron { background-image: url("02.jpg"); }
.jumbotron:hover { background-image: url("01.jpg"); }
Using pure CSS you can use the transition property to animate it like below. This is probably not available in older browsers though.
.jumbotron {
background-image: url("http://www.placecage.com/200/300");
transition: 1000ms;
}
.jumbotron:hover {
background-image: url("http://www.placecage.com/300/200");
transition: 1000ms;
}
<div class="jumbotron">
<div class="container">
<h1>Life is an Art.</h1>
<p style="font-size: 150%"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar nunc urna, non cursus enim ultricies in.</small></p>
<button type="button" class="btn btn-primary btn-lg">Learn More »</button>
</div>
</div>
I'm trying to emulate this on my design: http://jsfiddle.net/AYRh6/26/
But it's not working, and I can't find anything in the code that may be stopping it.
Must say I'm using code for a toggle effect.
Any help is much appreciated.
Fiddle of my problem: http://jsfiddle.net/Gr8sw/
My HTML is:
<div id="category">
<section id="pushOne" class="slidebox">
<div class="toggle">
<a class="bot" href="#"><img src="01.png" alt="Category 1"/></a>
<a class="top" href="#pushOne"><img src="01.png" alt="Category 1"/></a>
</div>
<div class="box"><h2>Category 1</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis aliquet odio, dictum hendrerit metus egestas non. Ut quis est tellus. Duis luctus elit nec arcu bibendum lacinia. Quisque luctus orci lorem, sit amet consequat enim mollis quis. Nullam dui magna, aliquam non venenatis et, lobortis eget felis.
</div>
</section>
</div>
And my CSS is:
.toggle {
height:230px;
width:230px;
position:relative;
z-index:2;
background:#CECECE;
}
.toggle:hover, .toggle.clicked {background:#F05A24;}
.orange {background#F05A24;}
.toggle img {width:100%;}
#pushOne img {padding-top:20px;}
.toggle a { position: absolute; padding:40px;}
.box {
overflow:hidden;
display:hidden;
opacity:0;
transition: all .4s ease-out;
margin-top:0px;
margin-bottom:20px;
width:230px;
}
.slidebox:target .box {
min-height:100px;
opacity:1;
}
.slidebox {float:left; margin:0 50px 0 0; transition: all 0.2s ease;}
.slidebox:target .top { opacity:0; pointer-events: none;}
#category {margin:0 auto;width:80%;}
Javascript:
$(".toggle").click(function () {
$(this).toggleClass(".clicked");
});</script>
It's surely something that my eye is not catching :(
You havn't specified any css propertiies for the class clicked(the class you want to toggle into)
Remove the dot(.).
$(".toggle").click(function () {
$(this).toggleClass("clicked");
});
Include externel jquery source please
http://code.jquery.com/jquery-1.9.1.js