Javascript scroll

Question

The code below works correctly, but it is hardcoded. I would like to be able to create arrays of field sets, hide these fields, and then every time I click the "# createEventForm-eventInformation-addElement" button, it displays the following. The problem with the code below is that it is hard-coded and thus breaks easily and will be much larger than using loops. Can someone help me do this better.

$("#fieldset-group1").hide(); $("#fieldset-group2").hide(); $("#fieldset-group3").hide(); $("#fieldset-group4").hide(); $("#fieldset-group5").hide(); $("#fieldset-group6").hide(); $("#fieldset-group7").hide(); $("#fieldset-group8").hide(); $("#fieldset-group9").hide(); $("#createEventForm-eventInformation-addElement").click( function() { ajaxAddEventInformation(); if($("#fieldset-group1").is(":hidden")) { $("#fieldset-group1").show(); } else { $("#fieldset-group2").show(); } } ); 

Answer 1

You should use the notation ^ = jquery selectors, which means starting with ..

 // this will hide all of your fieldset groups $('[id^="fieldset-group"]').hide(); 

Then

 $("#createEventForm-eventInformation-addElement").click( function() { ajaxAddEventInformation(); // find the visible one (current) var current = $('[id^="fieldset-group"]:visible'); // find its index var index = $('[id^="fieldset-group"]').index( current ); // hide the current one current.hide(); // show the next one $('[id^="fieldset-group"]').eq(index+1).show(); } ); 

Answer 2

Quick idea.

Adding a class to each set of fields allows you to say “hidden fields”. Declare a global variable to keep track of which field is displayed.

  $(".hiddenfields").hide();//hide all var num = 0;//none shown $("#createEventForm-eventInformation-addElement").click( function() { ajaxAddEventInformation(); num++; $("#fieldset-group" + num).show(); } ); 

Answer 3

Here is one simple solution.

 var index = 0; var fieldsets = [ $("#fieldset-group1").show(), $("#fieldset-group2"), $("#fieldset-group3"), $("#fieldset-group4"), $("#fieldset-group5"), $("#fieldset-group6"), $("#fieldset-group7"), $("#fieldset-group8"), $("#fieldset-group9") ]; $("#createEventForm-eventInformation-addElement").click(function() { ajaxAddEventInformation(); fieldsets[index++].hide(); if (index < fieldsets.length) { fieldsets[index].show(); } else { index = 0; fieldsets[index].show(); } }); 

Answer 4

Add the 'fieldset' class for all fields, and then:

 $("#createEventForm-eventInformation-addElement").click( function() { ajaxAddEventInformation(); $('.fieldset').is(':visible') .next().show().end() .hide(); } ); 

Answer 5

How about adding (or using) a class for these fields?

 $(".fieldset").hide(); // hides every element with class fieldset $("#createEventForm-eventInformation-addElement").click( function() { ajaxAddEventInformation(); // I assume that all fieldset elements are in one container #parentdiv // gets the first of all remaining hidden fieldsets and shows it $('#parentdiv').find('.fieldsset:hidden:first').show(); }); 

Answer 6

This will show the first hidden fieldset element whose identifier begins with "fieldset-group" ...

 $("fieldset[id^='fieldset-group']:hidden:first").show();