i have a small problem - i can add a file on click. only the dropzone dont work.
If I drag and drop the file in the browser, will be displayed and not uploaded.
$('#trigger-attachment').click(function(event) {
if ($('#attachment-1').val() == '') {
console.log('trigger 1')
$('#attachment-1').click();
$('.not-needed-if-pdf-provided').remove();
} else if ($('#attachment-2').val() == '') {
console.log('trigger 2')
$('#attachment-2').click();
$('.not-needed-if-pdf-provided').remove();
console.log('trigger 2')
} else if ($('#attachment-3').val() == '') {
console.log('trigger 3')
$('#attachment-3').click();
$('.not-needed-if-pdf-provided').remove();
} else {
alert('Maximal 3 Dokumente auswählbar. Entfernen Sie zunächst eines um ein anderes auszuwählen. Tipp: Fügen Sie mehrere Dateien zu einem PDF zusammen.');
}
});
$('#trigger-attachment').on('dragenter', function() { if ($('input.attachment.active').length > 0) $(this).addClass('dragging'); });
$('#trigger-attachment').on('drop', function() { $(this).removeClass('dragging'); });
$('#trigger-attachment').on('dragleave', function() { $(this).removeClass('dragging'); });
$('#trigger-attachment').on('dragexit', function() { $(this).removeClass('dragging'); });
$('#trigger-attachment').on('dragend', function() { $(this).removeClass('dragging'); });
$('input.attachment').click(function(event) {
event.stopImmediatePropagation();
console.log('click ' + $(this).attr('id'));
});
$('input.attachment').change(function() {
console.log('change');
$(this).removeClass('active');
var number = $(this).data('no');
var displayElement = $('#display-attachment-' + number);
if ($(this).val() == "") {
$(this).addClass('active');
displayElement.empty();
} else {
var file = this.files[0];
displayElement.html('<div onclick="$(\'#attachment-'+number+'\').val(\'\').addClass(\'active\');$(\'#display-attachment-'+number+'\').empty();">× '+file.name+'</div>');
}
});
#################### Here is the HTML INPUT ->
<div class="col-sm-12 col-md-12 col-lg-8 offset-lg-2">
<div id="trigger-attachment" class="text-center">
<img src="https://d17blcsvifkhsu.cloudfront.net/sites/5b056e1c85cde904fb840d8f/theme/images/share.svg?1540384342" style="max-width:40px;">
<p class="green-label">
(optional)<br>
</p>
<input class="attachment active" id="attachment-3" name="content[attachment_3]" data-no="3" type="file">
<input class="attachment active" id="attachment-2" name="content[attachment_2]" data-no="2" type="file">
<input class="attachment active" id="attachment-1" name="content[attachment_1]" data-no="1" type="file">
</div>
<div id="display-attachments">
<div id="display-attachment-1" class="display-attachment"></div>
<div id="display-attachment-2" class="display-attachment"></div>
<div id="display-attachment-3" class="display-attachment"></div>
</div>
</div>
##### this class should just hide another one
<div class="row pb-3 not-needed-if-pdf-provided">
Related
I am trying to make a step process with JavaScript.
And I want it when it reaches the step 3, the color changes to another color.
I tried a lot, but I didn't succeed.
Picture how step process works
Picture how I want it to work
$(document).ready(function() {
var i = 1;
var id = setInterval(steps, 700);
function steps() {
if (i == 4) {
clearInterval(id);
} else {
$(".step" + i).css('background-color', 'rgb(134 209 109)');
i++;
}
}
$(".btn-next").on("click", function() {
$('.page-1').fadeOut(1000, function() {
$('.page-2').fadeIn(1000);
});
var interval = setInterval(slide, 1200)
d = 1;
function slide() {
if (d == 6) {
clearInterval(interval);
$('.btn-next-two').fadeIn();
$('.search').fadeOut();
} else {
$(".ship-" + d).addClass('slide-in-left');
$(".ship-" + d).css('display', 'block');
d++;
}
}
});
$(".btn-next-two").on("click", function() {
$('.page-2').fadeOut(1000, function() {
$('.page-3').fadeIn(1000);
});
});
$('.btn-delivery').on('click', function() {
$('.page-3').fadeOut(1000, function() {
$('.page-4').fadeIn(1000);
});
});
$('.btn-time').on('click', function() {
$('.page-4').fadeOut(1000, function() {
$('.page-5').fadeIn(1000);
});
});
});
step {
min-height: 20px;
margin-right: 2px;
border-radius: 14px;
background-color: #a9b7b9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-2 col-sm-1 offset-2 offset-sm-4 step1 step">
</div>
<div class="col-2 col-sm-1 step2 step">
</div>
<div class="col-2 col-sm-1 step3 step">
</div>
<div class="col-2 col-sm-1 step4 step">
Just put
else if(i == 3){
$(".step"+i).css('background-color','red');
i++;
}
on the condition.
There is a tiny issue in your javascript code.
I updated the function step.
function steps(){
if(i == 5){
clearInterval(id);
}
else if(i == 3) {
$(".step"+i).css('background-color','red');
i++;
}
else{
$(".step"+i).css('background-color','rgb(134 209 109)');
i++;
}
}
Here is full code.
$(document).ready(function(){
var i = 1;
var id = setInterval(steps,700);
function steps(){
if(i == 5){
clearInterval(id);
}
else if(i == 3) {
$(".step"+i).css('background-color','red');
i++;
}
else{
$(".step"+i).css('background-color','rgb(134 209 109)');
i++;
}
}
$( ".btn-next" ).on( "click", function() {
$('.page-1').fadeOut(1000, function(){
$('.page-2').fadeIn(1000);
});
var interval = setInterval(slide,1200)
d = 1;
function slide(){
if(d == 6){
clearInterval(interval);
$('.btn-next-two').fadeIn();
$('.search').fadeOut();
}
else{
$(".ship-"+d).addClass('slide-in-left');
$(".ship-"+d).css('display','block');
d++;
}
}
});
$( ".btn-next-two" ).on( "click", function() {
$('.page-2').fadeOut(1000, function(){
$('.page-3').fadeIn(1000);
});
});
$('.btn-delivery').on('click',function(){
$('.page-3').fadeOut(1000, function(){
$('.page-4').fadeIn(1000);
});});
$('.btn-time').on('click',function(){
$('.page-4').fadeOut(1000, function(){
$('.page-5').fadeIn(1000);
});});
});
.step{
min-height:20px;
margin-right:2px;
border-radius:14px;
background-color:#a9b7b9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="col-2 col-sm-1 offset-2 offset-sm-4 step1 step">
</div>
<div class="col-2 col-sm-1 step2 step">
</div>
<div class="col-2 col-sm-1 step3 step">
</div>
<div class="col-2 col-sm-1 step4 step">
</body>
</html>
I use this code to hide block when user scrolling the page. How can i hide block only when scrolling outside it.
$('html, body').bind('scroll',function (e) {
var container = $("CONTAINER SELECTOR");
if (container.has(e.target).length === 0){
container.hide();
}
});
This is my html
<div class="parent_block">
<div class="menu-button">
<img src="/img.svg" />
</div>
<div class="toggled_block">
<nav>Home</nav>
</div>
</div>
<script>
$(".menu-button").click(function() {
$('.toggled_block').toggle();
});
$(document).on('click', function(e) {
if (!$(e.target).closest(".parent_block").length) {
$('.toggled_block').hide();
}
e.stopPropagation();
});
$(document).bind('scroll',function (e) {
var container = $(".toggled_block");
if (container.has(e.target).length === 0){
container.hide();
}
});
Image input is allowing to upload images without displaying the name of the file. I want to be able to see the file name when I upload an image; how can I make this possible? Could it be something to do with my script?
function readURL(input) {
if (input.files && input.files[0]) {
console.log("Reading File.");
var reader = new FileReader();
reader.addEventListener("load", function(e) {
if (jQuery("#preview-gallery li").length == 3) {
input.value = "";
return false;
}
var $imgP = jQuery("<img>", {
class: "uploaded-image icon",
src: reader.result
});
var $item = jQuery("<li>", {
class: "ui-widget-content ui-corner-all hidden"
});
$item.append($imgP).append("<a href='#' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>");
$item.appendTo(jQuery("#preview-gallery")).show("slow");
makeDrag($item);
updatePreviewCount();
});
if (input.files[0]) {
reader.readAsDataURL(input.files[0]);
} else {
console.log(" Reader: File Not found.");
}
input.value = "";
}
}
function renderContent() {
html2canvas(jQuery("#firstshirt"), {
allowTaint: true,
logging: true
}).then(function(canvas) {
jQuery("#previewImage").append(canvas);
jQuery("#download").css("display", "inline");
jQuery("#download").attr("href", jQuery("#previewImage")[0].children[0].toDataURL());
});
}
function makeDrag(o) {
o.draggable({
helper: "original",
revert: "invalid",
zIndex: 999
});
}
function makeResize(o) {
o.resizable();
}
function addImage($item, $pos) {
console.log(" Fade Item Out");
$item.fadeOut();
var $img = $item.find("img");
$img.css("width", "80px").css("height", "80px");
$item.remove();
updatePreviewCount();
console.log(" Making new Wrap");
var $drop = jQuery("<div>", {
class: "dragbal deleteme",
style: "position: absolute; top: 100px; left: 100px;"
});
$drop.append($img);
console.log($drop);
console.log(" Appending to #boxes");
$drop.appendTo(jQuery("#boxes")).fadeIn();
$drop.draggable({
containment: "#boxes"
});
makeResize($drop.find("img"));
}
function updatePreviewCount() {
var cnt = jQuery("#preview-gallery li").length;
jQuery(".upPreview span").html(cnt + "/3");
}
jQuery(download).ready(function() {
// Setup
jQuery(".file-upload-wrapper").hide();
jQuery(".out-put-img").hide();
jQuery('.smallimages').hide();
makeDrag(jQuery("[id$='-gallery'] ul li"));
jQuery("#boxes").droppable({
accept: ".gallery > li",
drop: function(e, ui) {
console.log("Drop Pos:", ui.offset);
addImage(ui.helper, ui.position);
}
});
// Events
jQuery("#btn-Preview-Image").click(function(e) {
e.preventDefault();
renderContent();
jQuery("#download").removeClass("disabled");
});
jQuery("#download").click(function(e) {
e.preventDefault();
return jQuery(this).hasClass("disabled");
});
jQuery("#imajes45").change(function() {
if (jQuery('#imajes45').val() == "new-upload") {
jQuery(".file-upload-wrapper").show();
jQuery(".file-select").hide();
} else {
jQuery(".file-upload-wrapper").hide();
jQuery(".file-select").show();
}
});
jQuery(".file-select").change(function() {
jQuery(".upPreview").hide();
jQuery("#" + jQuery(this).val() + "-gallery").show();
})
jQuery(".upload-img").change(function() {
readURL(this);
});
});
var myform = document.getElementById('myform');
if (myform != undefined) {
myform.onsubmit = function(e) { /* do some validation on event here */ };
}
$("#wrapper").hover(function() {
$("#boxes").css("border-color", "red");
},
function() {
$("#boxes").css("border-color", "transparent");
});
$(document).ready(function() {
$(".container").on("dblclick", ".deleteme", function() {
console.log('clicked delete')
$(this).remove();
});
<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> <script src="https://files.codepedia.info/uploads/iScripts/html2canvas.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<select id="imajes45">
<option value="">Choose upload</option>
<option value="new-upload">Upload Images</option>
</select>
<div class="file-upload-wrapper" id="draggableHelper" style="display: none;">
<div>
<input type="file" class="upload-img" name="file1" id="file1" onchange="readURL(this);" /><span id='contactus_file1_errorloc' class='error'></span>
</div>
<div>
<input type="file" class="upload-img2" name="file2" id="file2" onchange="readURL(this);" /><span id='contactus_file2_errorloc' class='error'></span>
</div>
<div>
<input type="file" class="upload-img3" name="file4" id="file4" onchange="readURL(this);" /><span id='contactus_file4_errorloc' class='error'></span>
</div>
<div id="upload-preview" class="small upPreview">
<span>0/3</span>
<ul id="preview-gallery" class="gallery ui-helper-reset ui-helper-clearfix">
</ul>
</div>
</div>
here is the prevent default
jQuery("#btn-Preview-Image").click(function(e) {
e.preventDefault();
renderContent();
jQuery("#download").removeClass("disabled");
});
jQuery("#download").click(function(e) {
e.preventDefault();
return jQuery(this).hasClass("disabled");
});
The first button onclick works, but when the onclick is set to stopChrono() instead of chrono(), the stopChrono() doesn't work. This only happens in Chrome, because in Mozilla and Edge, works perfectly.
This is the code of the web:
https://jsbin.com/mononohute/edit?html,js,output
P.S: This post isn't the same as the other "Onclick doesn't work in Chrome" because the circunstances are totally diferent.
I restructured the click event handler.
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
if (text === 'Stop!') {
$(this).attr('class', 'w3-btn w3-green');
stopChrono();
return 'Start!';
} else {
$(this).attr('class', 'w3-btn w3-red');
chrono();
return 'Stop!';
}
});
});
While the original was this:
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
$(this).attr("class", "w3-btn w3-red")
return text === 'Stop!' ? 'Start!' : 'Stop!';
})
if ($(this).attr('onclick') == 'chrono()') {
$(this).attr('onclick', 'stopChrono()')
} else {
$(this).attr('onclick', 'chrono()')
$(this).attr('class', 'w3-btn w3-green')
}
});
It works now. I removed the html onclick handler because else chrono() fired twice.
var start = document.getElementById('start'),
reset = document.getElementById('reset'),
counter = document.getElementById('counter'),
sCounter = 0,
mCounter = 0,
hCounter = 0,
displayChrono = function() {
if (sCounter < 10) {
sCounter = "0" + sCounter;
}
if (mCounter < 10) {
mCounter = "0" + mCounter;
}
if (hCounter < 10) {
hCounter = "0" + hCounter;
}
counter.value = hCounter + ":" + mCounter + ":" + sCounter;
},
chronometer,
openchrono = document.getElementById('openchrono'),
chronowinin = document.getElementById('chronowinin');
function chrono() {
chronometer = setInterval(function() {
mCounter = +mCounter;
hCounter = +hCounter;
sCounter = +sCounter;
sCounter++;
if (sCounter == 60) {
mCounter++;
sCounter = 0;
}
displayChrono();
}, 1000);
}
function resetChrono() {
sCounter = 0;
mCounter = 0;
hCounter = 0;
displayChrono();
}
function stopChrono() {
clearInterval(chronometer);
}
$('#openchrono').click(function() {
if ($(this).attr('value') == '+') {
$(this).attr('value', '-');
$('#chronowinin').slideDown();
} else {
$(this).attr('value', '+');
$('#chronowinin').slideUp();
}
});
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
if (text === 'Stop!') {
$(this).attr('class', 'w3-btn w3-green');
stopChrono();
return 'Start!';
} else {
$(this).attr("class", "w3-btn w3-red");
chrono();
return 'Stop!';
}
});
});
//
// $('#start').click(function() {
// if ($(this).attr('value') == 'Start!') {
// $(this).attr('value', 'Stop!');
// $(this).attr('class', 'w3-btn w3-red')
// $('#start').click(stopChrono());
// }});
//else {
// $(this).attr('value', 'Start!');
// $(this).attr('class', 'w3-btn w3-green');
// $('#start').click(stopChrono()
// // function() {
// // function stopChrono() {
// // clearInterval(chronometer);
// // }
// //}
// );
// }});
//
//
// openchrono.addEventListener("click", function() {
// chronowinin.className = "w3-container w3-row";
// openchrono.innerHTML = "-";
// openchrono.id = "closechrono"
//
// closechrono.addEventListener("click", function() {
// var closechrono = document.getElementById('closechrono');
// chronowinin.className = "w3-container w3-row hidden";
// openchrono.innerHTML = "+";
// closechrono.id = "openchrono"
// });
// });
// )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Everything - everything you'll want is here.</title>
</head>
<body>
<div class="w3-row w3-container">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col m6 w3-center w3-text-white w3-xxlarge">
<p>
<i>Everything you want is here.</i>
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<div id="chronowin" class="w3-container w3-row">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-red showhover">
<p>
Chronometer
<input type="button" value="+" id="openchrono" class="w3-btn-floating w3-red" style="right:5%; float:right; border:none"></input>
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<div id="chronowinin" class="w3-container w3-row" style="display: none">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col s 12 m6 w3-center w3-white w3-text-grey">
<p></p>
<input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center">
<br>
<p></p>
<input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green">
<!-- <input type="button" name="name" value="Stop!" class="w3-btn w3-red" onclick="stopChrono()"> -->
<input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="resetChrono()">
<p></p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<script src="js/jquery.js" charset="utf-8"></script>
<script src="js/chronometer.js" charset="utf-8"></script>
</body>
</html>
jQuery conveniently stores event listeners, so if you define them in separate functions, you can easily remove them:
function stopChrono() {
clearInterval(chronometer);
$(this).attr('class', 'w3-btn w3-green')
$('#start').off('click', stopChrono)
$('#start').on('click', startChrono)
}
function startChrono(e) {
$(this).attr('value', function (_, text) {
$(this).attr("class", "w3-btn w3-red")
return text === 'Stop!' ? 'Start!' : 'Stop!';
})
$('#start').off('click', startChrono)
$('#start').on('click', stopChrono)
}
$('#start').on('click', startCrono);
Once the chrono is started, I removed the 'click' event listener because the next click should not start the chrono. I also added the stopChrono 'click' event listener because it should stop the chrono.
The reverse is true for stopChrono(): the 'click' listener is disconnected from stopChrono, and reconnected to startChrono.
Now you should be able to go back and forth.
I have this HTML markup:
<ul style="text-align: center;" class="product-wizard-bar">
<li style="cursor:default" class="active" data-display="categories-picker" id="tab1">Seleccionar categoría</li>
<li data-display="product-create-step-2" id="tab2" class="">Datos</li>
<li style="display: none" data-display="product-create-step-3" id="tab3">Variaciones</li>
<li data-display="product-create-step-4" id="tab4" class="">Detalles del Producto</li>
<li data-display="product-create-step-5" id="tab5" class=""><a class="last" style="cursor:default" href="#">Condiciones de Venta</a></li>
</ul>
<fieldset title="Categoría" class="fstep" id="categories-picker" style="display: none;"></fieldset>
<fieldset style="display: none;" title="Producto" class="fstep" id="product-create-step-2"></fieldset>
<fieldset style="display: none" title="Variaciones" id="product-create-step-3"></fieldset>
<fieldset style="display: none;" title="Detalles" class="fstep" id="product-create-step-4"></fieldset>
<fieldset style="display: none;" title="Condiciones" class="fstep" id="product-create-step-5"></fieldset>
<div style="position:absolute; right:0px; margin-top: 20px; margin-bottom: 20px;">
<button disabled="disabled" id="previous-step" name="previous" type="button" class="button">« Anterior</button>
<button id="next-step" name="next" type="button" class="button">Siguiente »</button>
</div>
And this is the jQuery code to handle next/previous steps:
$('fieldset.fstep').hide().eq(0).show();
$('#next-step').click(function() {
var current = $('fieldset.fstep:visible'), next = current.next('fieldset.fstep');
var category_id = $("#selected_category").val();
if (next.length === 0) {
next = current.nextUntil('fieldset.fstep').next('fieldset.fstep');
}
current.hide();
next.show();
if (next.nextUntil('fieldset.fstep').next('fieldset.fstep').add(next.next('fieldset.fstep')).length === 0) {
$("#next-step").prop("disabled", true);
}
$("#previous-step").prop("disabled", false);
});
$('#previous-step').click(function() {
var current = $('fieldset.fstep:visible'), prev = current.prev('fieldset.fstep');
var category_id = $("#selected_category").val();
if (prev.length === 0) {
prev = current.prevUntil('fieldset.fstep').prev('fieldset.fstep');
}
current.hide();
prev.show();
if (prev.prevUntil('fieldset.fstep').prev('fieldset.fstep').add(prev.prev('fieldset.fstep')).length === 0) {
$("#previous-step").prop("disabled", true);
}
$("#next-step").prop("disabled", false);
});
$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4, #tab5", function() {
var div = $('#' + $(this).data('display'));
$("li.active").removeClass("active");
$(this).addClass('active');
if ($.trim(div.html()) !== '') {
$('#' + $(this).data('display')).show().siblings('fieldset').hide();
}
return false;
});
How I can change the active class to the element according to the fieldset I'm on? I mean when I click next/previous button?
Since the id of the displayed item and the data-display property of the wizard-bar items are same, you can use it to filter and add the active class
var $fsteps = $('fieldset.fstep').hide();
var $wizitems = $('.product-wizard-bar > li');
$fsteps.eq(0).show();
$('#next-step').click(function () {
var current = $fsteps.filter(':visible'),
next = current.next('fieldset.fstep');
var category_id = $("#selected_category").val();
if (next.length === 0) {
next = current.nextUntil('fieldset.fstep').next('fieldset.fstep');
}
current.hide();
next.show();
$wizitems.filter('.active').removeClass('active')
$wizitems.filter('[data-display="' + next.attr('id') + '"]').addClass('active')
if (next.nextUntil('fieldset.fstep').next('fieldset.fstep').add(next.next('fieldset.fstep')).length === 0) {
$("#next-step").prop("disabled", true);
}
$("#previous-step").prop("disabled", false);
});
$('#previous-step').click(function () {
var current = $fsteps.filter(':visible'),
prev = current.prev('fieldset.fstep');
var category_id = $("#selected_category").val();
if (prev.length === 0) {
prev = current.prevUntil('fieldset.fstep').prev('fieldset.fstep');
}
current.hide();
prev.show();
$wizitems.filter('.active').removeClass('active')
$wizitems.filter('[data-display="' + prev.attr('id') + '"]').addClass('active')
if (prev.prevUntil('fieldset.fstep').prev('fieldset.fstep').add(prev.prev('fieldset.fstep')).length === 0) {
$("#previous-step").prop("disabled", true);
}
$("#next-step").prop("disabled", false);
});
$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4, #tab5", function () {
var div = $('#' + $(this).data('display'));
$("li.active").removeClass("active");
$(this).addClass('active');
if ($.trim(div.html()) !== '') {
$('#' + $(this).data('display')).show().siblings('fieldset').hide();
}
return false;
});
Demo: Fiddle