I am trying to hide sidebars by using toggle() jquery function.
Code:
$('#hide_saved_templates').click(function(){
$('#saved_templates').toggle('slow');
var jobWrapper = $('#job_form_wrapper');
if(jobWrapper.hasClass('col-md-7'))
{
jobWrapper.removeClass('col-md-7');
$('#hide_saved_templates').removeClass('glyphicon-backward');
$('#hide_saved_templates').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-9');
}
else if(jobWrapper.hasClass('col-md-10'))
{
jobWrapper.removeClass('col-md-10');
$('#hide_saved_templates').removeClass('glyphicon-backward');
$('#hide_saved_templates').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-12');
}
else if(jobWrapper.hasClass('col-md-12')){
jobWrapper.removeClass('col-md-12');
$('#hide_saved_templates').removeClass('glyphicon-forward');
$('#hide_saved_templates').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-10');
}
else {
jobWrapper.removeClass('col-md-9');
$('#hide_saved_templates').removeClass('glyphicon-forward');
$('#hide_saved_templates').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-7');
}
});
$('#hide_job_history').click(function(){
$('#jobs_history').toggle('slow');
var jobWrapper = $('#job_form_wrapper');
if(jobWrapper.hasClass('col-md-7'))
{
jobWrapper.removeClass('col-md-7');
$('#hide_job_history').removeClass('glyphicon-forward');
$('#hide_job_history').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-10');
}
else if(jobWrapper.hasClass('col-md-10'))
{
jobWrapper.removeClass('col-md-10');
$('#hide_job_history').removeClass('glyphicon-backward');
$('#hide_job_history').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-7');
}
else if(jobWrapper.hasClass('col-md-9')){
jobWrapper.removeClass('col-md-9');
$('#hide_job_history').removeClass('glyphicon-forward');
$('#hide_job_history').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-12');
}
else if(jobWrapper.hasClass('col-md-12')){
jobWrapper.removeClass('col-md-12');
$('#hide_job_history').removeClass('glyphicon-backward');
$('#hide_job_history').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-9');
}
});
The toggle is working fine and toggling the sidebars as expected. However, the default easing animation of toggle('slow') is working perfectly for one sidebar $('#saved_templates').toggle('slow')
and not working for the other $('#jobs_history').toggle('slow');
. I have used the same code for both sidebars but I didn't able to understand the reason for this inconsistency. I want to apply smooth simple transition to the toggle effect.
HTML Structure:
<div class="row">
<div class="col-md-2 no-padding show-templates-outer-wrapper" id="saved_templates" style="display: none;"></div>
<div class="no-padding col-md-12" id="job_form_wrapper">
<span id="hide_saved_templates" class="glyphicon glyphicon-forward" style="cursor: pointer;"></span>
<span id="hide_job_history" style="position: absolute; right: 5px; cursor: pointer;" class="glyphicon glyphicon-forward"></span>
</div>
<div class="col-md-3 no-padding show-jobs-history-outer-wrapper" id="jobs_history" style="display: none;"></div>
</div>
The problem is toggle
and changing class occurs same time. Since jobs_history
div
is in the last position it's toggle
event is not affecting others. Following code snippet may help you.
var saved_templates = $('#saved_templates'); var jobs_history = $('#jobs_history'); $('#hide_saved_templates').click(function() { if (saved_templates.is(':visible')) { saved_templates.hide('slow', function() { jobs_history.show(); }); } else { jobs_history.hide(); saved_templates.show('slow'); } $(this).toggleClass('glyphicon-backward glyphicon-forward'); }); $('#hide_job_history').click(function() { if (jobs_history.is(':visible')) { jobs_history.hide(); saved_templates.show('slow'); } else { saved_templates.hide('slow', function() { jobs_history.show(); }); } $(this).toggleClass('glyphicon-backward glyphicon-forward'); });
#saved_templates, #jobs_history, #job_form_wrapper { border: 1px solid #000; height: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-2 no-padding show-templates-outer-wrapper" id="saved_templates" style="display: none;"></div> <div class="no-padding col-md-10" id="job_form_wrapper"> <span id="hide_saved_templates" class="glyphicon glyphicon-forward" style="cursor: pointer;"></span> <span id="hide_job_history" style="position: absolute; right: 5px; cursor: pointer;" class="glyphicon glyphicon-forward"></span> </div> <div class="col-md-2 no-padding show-jobs-history-outer-wrapper" id="jobs_history" style="display: none;"></div> </div>
See the result in full page.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.