javascript - Trying to change Divs and then revert -
i want able click on 1 of <div class="col-md-4'>'s , turn <div class="col-md-12"> smoothly while smoothly getting rid of remaining md-4's. when click again on md-12 want smoothly opposite.. can't work out what's going on.
when click col-md-4 it'll want, minus smoothness, won't revert back. if hav col-md-12 default , remove col-md-4 code col-md-12 revert 4.. no luck 4 12 4.
why this?
$(document).ready(function(){ $('.col-md-4').click(function(){ $(this).switchclass("col-md-4", "col-md-12", 1000).removeclass('col-md-4'); $('.col-md-4').addclass('profiles-gone'); }); $('.col-md-12').click(function(){ $(this).removeclass('col-md-12'); $('.col-md-4').removeclass('profiles-gone'); $(this).addclass('col-md-4'); }); });.col-md-12 { background-color: #a9f5bc }<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <div class="profile"> <!--<a href="#" class="expand-button"><i class="fa fa-expand fa-2x" id="bigger"></i></a>--> <h2>veronica a</h2> <img src="http://placehold.it/250x250"> <h3>head of xyz @ xyz</h3> <p class="about-short">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p> <p class="about-long">lelelelele</p> </div> </div> <div class="col-md-4"> <div class="profile"> <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>--> <h2>veronica b</h2> <img src="http://placehold.it/250x250"> <h3>head of xyz @ xyz</h3> <p style="about-short">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p> <p class="about-long">lelelelelele</p> </div> </div> <div class="col-md-4"> <div class="profile"> <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>--> <h2>veronica c</h2> <img src="http://placehold.it/250x250"> <h3>head of xyz @ xyz</h3> <p style="about-short">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more</a></p> <p class="about-long">lelelelele</p> </div> </div> </div> </div>
it's because no .col-md-12 when execute code. need delegate events on:
$(document).ready(function() { $(document).on('click', '.col-md-4', function() { $(this).switchclass("col-md-4", "col-md-12", 1000).removeclass('col-md-4'); $('.col-md-4').addclass('profiles-gone'); }).on('click', '.col-md-12', function() { $(this).removeclass('col-md-12'); $('.col-md-4').removeclass('profiles-gone'); $(this).addclass('col-md-4'); }); }); working example code snippet below:
$(document).ready(function() { // parent container events, $(document) // it's best practice use "static parent" id, // in case, appear have none, // we'll use dom (document) // here's our first click event, assigned work on element's having class "col-md-4" .on('click', '.col-md-4', function() { $(this).switchclass("col-md-4", "col-md-12", 1000).removeclass('col-md-4'); $('.col-md-4').addclass('profiles-gone'); }) // here's our 2nd click event, assigned work on element's having class "col-md-12" .on('click', '.col-md-12', function() { $(this).removeclass('col-md-12'); $('.col-md-4').removeclass('profiles-gone'); $(this).addclass('col-md-4'); }); });.col-md-12 { background-color: #a9f5bc }<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <div class="profile"> <!--<a href="#" class="expand-button"><i class="fa fa-expand fa-2x" id="bigger"></i></a>--> <h2>veronica a</h2> <img src="http://placehold.it/250x250"> <h3>head of xyz @ xyz</h3> <p class="about-short">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p> <p class="about-long">lelelelele</p> </div> </div> <div class="col-md-4"> <div class="profile"> <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>--> <h2>veronica b</h2> <img src="http://placehold.it/250x250"> <h3>head of xyz @ xyz</h3> <p style="about-short">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p> <p class="about-long">lelelelelele</p> </div> </div> <div class="col-md-4"> <div class="profile"> <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>--> <h2>veronica c</h2> <img src="http://placehold.it/250x250"> <h3>head of xyz @ xyz</h3> <p style="about-short">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more</a></p> <p class="about-long">lelelelele</p> </div> </div> </div> </div>
Comments
Post a Comment