javascript - How can I condense this Jquery Code? -
i've been learning jquery while now, , i've created script when click on div(#click) div(#slide) slide down , show content inside. below script i've written me, feel repetitive . there must better way of achieving same results, less code. i've googled haven't been able find solutions, ideas anyone?
$(document).ready(function(){ $("#click").click(function(){ $("#slide").slidetoggle("slow"); }); $("#click2").click(function(){ $("#slide2").slidetoggle("slow"); }); $("#click3").click(function(){ $("#slide3").slidetoggle("slow"); }); $("#click4").click(function(){ $("#slide4").slidetoggle("slow"); }); $("#click5").click(function(){ $("#slide5").slidetoggle("slow"); }); $("#click6").click(function(){ $("#slide6").slidetoggle("slow"); }); $("#click7").click(function(){ $("#slide").slidetoggle("slow"); }); $("#click8").click(function(){ $("#slide8").slidetoggle("slow"); }); $("#click9").click(function(){ $("#slide9").slidetoggle("slow"); }); $("#click10").click(function(){ $("#slide10").slidetoggle("slow"); }); $("#click11").click(function(){ $("#slide11").slidetoggle("slow"); }); $("#click12").click(function(){ $("#slide12").slidetoggle("slow"); }); $("#click13").click(function(){ $("#slide13").slidetoggle("slow"); }); $("#click14").click(function(){ $("#slide14").slidetoggle("slow"); }); $("#click15").click(function(){ $("#slide15").slidetoggle("slow"); }); $("#click16").click(function(){ $("#slide16").slidetoggle("slow"); }); $("#click17").click(function(){ $("#slide17").slidetoggle("slow"); }); $("#click18").click(function(){ $("#slide18").slidetoggle("slow"); }); $("#click19").click(function(){ $("#slide19").slidetoggle("slow"); }); }); i know ugly, clue have use keyword (this), not know how implement it. appreciated.
here html:
<div id="main"> <div class="content"> <img src="images/training.jpg" alt="banner" class="pic"/> <h3>10 hour construction</h3> <p> <span class="theme">10 hour</span> program intended provide instruction on variety of construction safety , health standards entry-level participants. employees receive acknowledgement of completion & wallet card upon completion of training.</p> </div><!-- content div --> <div id="click"> <p>show more / show less</p> </div> <div id="slide"> <h4>mandatory topics 7 hours:</h4> <ul class="services"> <li>intro osha- 2 hours</li> <li>focus 4 - 4 hours: fall protection- minimum 1hr. 15 minutes, electrical-minimum 30 minutes, struck minimum 30 minutes & caught in or between minimum 30 minutes</li> <li>personal protective & life saving equipment - minimum 30 minutes</li> <li>health hazards in construction - minimum 30 minutes</li> <li>stairways & ladders - 30 minutes</li> </ul> <h4>elective topics 2 hours:</h4> <ul class="services"> <li>material handling, storage, use , disposal, subpart h</li> <li>tools- hand , power, subpart i</li> <li>scaffold, subpart l</li> <li>cranes, derricks, hoists, elevators, & conveyors, subpart n</li> <li>excavation, subpart p</li> </ul> <h4>optional topics 1 hour:</h4> <ul class="services"> <li>subpart h: materials handling, storage, use , disposal</li> <li>subpart n: cranes, derricks, hoists, elevators, , conveyors</li> <li>subpart o: motor vehicles, mechanized equipment; construction equipment</li> <li>subpart l: scaffolding</li> <li>subpart p: excavations</li> <li>subpart x: stairways , ladders</li> <li>subpart d: occupational health & environmental controls (emphasis on hazard communication)</li> <li>subpart e: personal protective equipment</li> <li>subpart f: fire protection , prevention</li> <li>subpart g: signs, signals, , barricades</li> <li>subpart i: tools – hand , power</li> <li>subpart j: welding , cutting</li> <li>subpart q: concrete , masonry construction</li> <li>subpart r: steel erection</li> <li>subpart s: underground construction, caissons, cofferdams & compressed air</li> <li>subpart t: demolition</li> <li>subpart u: blasting , use of explosives</li> <li>subpart v: power transmission , distribution</li> <li>subpart w: rollover protective structures</li> <li>subpart z: toxic , hazardous substances</li> <li>1910 confined spaces</li> <li>29 cfr 1904: recordkeeping, osha forms 300, 300a & 301</li> </ul> </div><!-- slide div --> <div class="content"> <h3>10 hour general industry</h3> <p> <span class="theme">10 hour</span> program intended provide instruction on variety of general industry safety , health standards entry-level participants. employees receive acknowledgement of completion & wallet card upon completion of training.</p> </div> <div id="click2"> <p>show more / show less</p> </div> <div id="slide2"> <h4>mandatory topics 7 hours:</h4> <ul class="services"> <li>intro osha- 2 hours</li> <li>walking , working surfaces, including fall protection – 1 hour</li> <li>exit routes, emergency action plans, fire prevention plans, , fire protection – 1 hour</li> <li>electrical – 1 hour</li> <li>personal protective equipment – 1 hour</li> <li>hazard communication – 1 hour</li> </ul> <h4>elective topics 2 hours:</h4> <ul class="services"> <li>hazardous materials tools- hand , power, subpart i</li> <li>materials handling</li> <li>machine guarding</li> <li>introduction industrial hygiene</li> <li>bloodborne pathogens</li> <li>ergonomics</li> <li>safety & health program</li> <li>fall protection</li> </ul> </div><!-- slide div --> <div class="content"> <h3>30 hour construction</h3> <p> <span class="theme">30 hour</span> program intended provide instruction on variety of construction safety , health standards entry-level , intermediate-level participants. employees receive acknowledgement of completion & wallet card upon completion of training.</p> </div><!--content div --> <div id="click3"> <p>show more / show less</p> </div> <div id="slide3"> <h4>mandatory topics 15 hours:</h4> <ul class="services"> <li>intro osha - 2 hours</li> <li>managing safety & health - 2 hours</li> <li>focus four- 6 hours: fall protection - minimum 1 hour 15 minutes, electrical-minimum 30 minutes, struck minimum 30 minutes & caught in or between minimum 30 minutes</li> <li>personal protective & life saving equipment - 2 hours</li> <li>health hazards in construction - 2 hours</li> <li>stairways & ladders - 1 hour</li> </ul> <h4>elective topics 12 hours:</h4> <ul class="services"> <li>std 3-1.1 "clarification of citation policy regarding 29 cfr 1926.20, 29 cfr 1926.21 , related general safety , health provisions"; safety programs</li> <li>fire protection , prevention, subpart f</li> <li>material handling, storage, use , disposal, subpart h</li> <li>tools- hand , power, subpart i</li> <li>welding , cutting, subpart j</li> <li>scaffold, subpart l</li> <li>cranes, derricks, hoists, elevators, , conveyers, subpart n</li> <li>motor vehicles, mechanized equipment , marine operations; rollover protective structures , overhead</li> <li>protection; , signs, signals , barricades, subpart o, w , g</li> <li>excavations, subpart p</li> <li>concrete , masonry construction, subpart q</li> <li>steel erection, subpart r</li> <li>confined space entry</li> <li>power industrial vehicles</li> </ul> <h4>optional topics 3 hours:</h4> <ul class="services"> <li>subpart d: occupational health & environmental controls (emphasis on hazard communication)</li> <li>subpart e: personal protective equipment</li> <li>subpart f: fire protection , prevention</li> <li>subpart g: signs, signals, , barricades</li> <li>subpart i: tools – hand , power</li> <li>subpart j: welding , cutting</li> <li>subpart q: concrete , masonry construction</li> <li>subpart r: steel erection</li> <li>subpart s: underground construction, caissons, cofferdams , compressed air</li> <li>subpart t: demolition</li> <li>subpart u: blasting , use of explosives</li> </ul> </div> <div class="content"> <h3>30 hour general industry</h3> <p> <span class="theme">30 hour</span> program intended provide instruction on variety of general industry safety , health standards entry-level , intermediate-level participants. employees receive acknowledgement of completion & wallet card upon completion of training.</p> </div> <div id="click4"> <p>show more / show less</p> </div> <div id="slide4"> <h4>mandatory topics 13 hours:</h4> <ul class="services"> <li>intro osha - 2 hours</li> <li>managing safety & health - 2 hours</li> <li>walking , working surfaces, including fall protection - 1 hour</li> <li>exit routes, emergency action plans, fire prevention plans, , fire protection - 2 hours</li> <li>electrical - 2 hours</li> <li>personal protective equipment (ppe) - 1 hour</li> <li>materials handling - 2 hours</li> <li>hazard communication -1 hour</li> </ul> <h4>elective topics 10 hours:</h4> <ul class="services"> <li>hazardous materials (flammable , combustible liquids, spray finishing, compressed gases, dipping , coating operations)</li> <li>permit-required confined spaces</li> <li>lockout / tagout</li> <li>machine guarding</li> <li>welding, cutting, , brazing</li> <li>introduction industrial hygiene</li> <li>bloodborne pathogens</li> <li>ergonomics</li> <li>fall protection</li> <li>safety , health programs</li> <li>powered industrial vehicles</li> </ul> <h4>optional topics 7 hours:</h4> <ul class="services"> <li>teach other general industry hazards or policies and/or expand on mandatoryor elective topics.</li> <li>the minimum length of topic one-half hour.</li> </ul> </div> <div class="content"> <h3>aerial boom lift / scissor lift operator safety course</h3> <p> program consists of classroom instruction , hands-on performance testing. hands-on training conducted @ location on equipment. employees receive acknowledgement of completion & wallet card upon completion of training. listed below topics presented.</p> </div> <div id="click5"> <p>show more / show less</p> </div> <div id="slide5"> <h4>classroom instruction:</h4> <ul class="services"> <li>manufacturer safety & operation video presentation</li> <li>manufacturer safety & operators manual</li> <li>osha/ manufacturer regulations - operator’s responsibilities & user release/ indemnity</li> <li>nomenclature - safety placards & component identification</li> <li>pre-operation inspection - hydraulics ( hydraulic components must retracted accurate reading of hydraulic level)</li> <li>operators responsibilities</li> <li>work site assessment- identification of site hazards</li> <li>site conditions- terrain, wind, existing hazards</li> <li>function test- ground controls versus platform controls</li> <li>safe operation of equipment - 4 steps positioning - ramp, direction of travel- directional arrows, emergency shutdown</li> <li>equipment stability - center of gravity, personnel & load capacity</li> <li>egress platform - 3 points of contact, body position exiting</li> <li>transfer structures equipment</li> <li>electrical hazards - minimum approach distance</li> <li>fall protection - body harness & tie off points</li> <li>proper shutdown of equipment</li> <li>repair & maintenance - authorized personnel & annual inspection</li> <li>passenger training requirements & communication</li> <li>load capacity of personnel platform</li> <li>written exam</li> </ul> <h4>hands on instruction:</h4> <ul class="services"> <li>pre-operation inspection of equipment</li> <li>work site assessment</li> <li>function & controls testing</li> <li>hands on performance testing</li> <li>steps shut down equipment</li> </ul> </div> <div class="content"> <h3>heavy equipment operator - backhoe / front-end loader, mini excavator, skid steer loader, dozer, etc..</h3> <p> according manufacturer, employees operate heavy equipment must trained , qualified company. in course, train student in skills needed safely operate heavy equipment. hands-on operation performed on heavy equipment provided company. employees receive acknowledgement of completion & wallet card upon completion of training.</p> </div> <div id="click6"> <p>show more / show less</p> </div> <div id="slide6"> <h4>heavy equipment-related topics:</h4> <ul class="services"> <li>osha/ manufacturer regulations operating instructions, warnings, , precautions heavy equipment operator authorized operate</li> <li>pre operation inspection</li> <li>heavy equipment controls , instrumentation: located, do, , how work</li> <li>steering , maneuvering</li> <li>visibility (including restrictions due loading)</li> <li>vehicle capacity/ stability</li> <li>any vehicle inspection , maintenance operator required perform</li> <li>refueling and/or charging , recharging of batteries</li> <li>any other operating instructions, warnings, or precautions listed in operator’s manual types of vehicle employee being trained operate</li> </ul> <h4>workplace-related topics:</h4> <ul class="services"> <li>surface conditions heavy equipment operated</li> <li>composition of loads carried , load stability</li> <li>pedestrian traffic in areas equipment operated</li> <li>hazardous (classified) locations equipment operated</li> <li>ramps , other sloped surfaces affect equipment’s stability</li> <li>closed environments , other areas insufficient ventilation or poor vehicle maintenance cause buildup of carbon monoxide or diesel exhaust.</li> <li>other unique or potentially hazardous environmental conditions in workplace affect safe operation</li> <li>hands-on training conducted on equipment @ facility</li> <li>we finish written exam & open discussion.</li> </ul> </div> <div class="content"> <h3>rigging & signal communication safety training</h3> <p> program consists of classroom instruction , hands-on performance testing. power point presentation & hands on instruction used discuss general rigging procedures & osha guidelines. hands-on training conducted @ location using equipment.</p> </div> <div id="click7"> <p>show more / show less</p> </div> <div id="slide7"> <h4>material handling/ rigging:</h4> <ul class="services"> <li>osha subpart h regulations material handling, storage, use, , disposal</li> <li>designation of qualified rigger - osha subpart cc training requirements</li> <li>inspection & maintenance of rigging equipment</li> <li>work site assessment - identification of site hazards</li> <li>determination of load weight & load capacity of rigging equipment</li> <li>sling angle tensions - 90, 60, 45 , 30 degree angles</li> <li>load angle factor formula</li> <li>rigger’s capacity card review in detail.</li> <li>establishing swing zone & radius clearance</li> <li>written exam</li> </ul> <h4>hand signals / communication:</h4> <ul class="services"> <li>osha crane subpart cc hand signal regulations</li> <li>designation of qualified signal person - training requirements</li> <li>rigger’s hand signal card review in detail.</li> <li>establishing communication- hand signals & radio communication crane operators & contractors on site.</li> <li>written exam</li> </ul> </div> <div class="content"> <h3>industrial lift truck/ rough terrain forklift operator safety</h3> <p> according <span class="theme">osha (29 cfr 1910.178)</span>, employees operate powered industrial truck / rough terrain forklift must trained , authorized company prior operation. in course, train student in skills needed safely operate standard, rough terrain, gas- propane and/or electric forklift truck. hands-on practice using actual forklift through obstacle course highlight of class. employees receive acknowledgement of completion & wallet card upon completion of training.</p> </div> <div id="click8"> <p>show more / show less</p> </div> <div id="slide8"> <h4>truck-related topics:</h4> <ul class="services"> <li>osha/ manufacturer regulations <li>operating instructions, warnings, , precautions types of truck operator authorized operate</li> <li>differences between truck , automobile</li> <li>truck controls , instrumentation: located, do, , how work</li> <li>engine or motor operation</li> <li>steering , maneuvering</li> <li>visibility (including restrictions due loading)</li> <li>fork , attachment adaptation, operation, , use limitations</li> <li>vehicle capacity</li> <li>vehicle stability</li> <li>any vehicle inspection , maintenance operator required perform</li> <li>refueling and/or charging , recharging of batteries</li> <li>operating limitations</li> <li>any other operating instructions, warnings, or precautions listed in operator’s manual types of vehicle employee being trained operate</li> </ul> <h4>workplace-related topics:</h4> <ul class="services"> <li>surface conditions vehicle operated</li> <li>composition of loads carried , load stability</li> <li>load manipulation, stacking, , unstacking</li> <li>pedestrian traffic in areas vehicle operated</li> <li>narrow aisles , other restricted places vehicle operated</li> <li>hazardous (classified) locations vehicle operated</li> <li>ramps , other sloped surfaces affect vehicle’s stability</li> <li>closed environments , other areas insufficient ventilation or poor vehicle maintenance cause buildup of carbon monoxide or diesel exhaust.</li> <li>other unique or potentially hazardous environmental conditions in workplace affect safe operation</li> <li>hands-on portion done on machine @ facility</li> </ul> </div> <div class="content"> <h3>scaffolding user & competency safety</h3> <p> purpose of course provide scaffold erector, users , scaffold inspector knowledge of osha regulations, safety guidelines, procedures , best work practices needed recognize , eliminate hazards in field. course supports designation of competent person required osha. employees receive acknowledgement of completion & wallet card upon completion of training.</p> </div> <div id="click9"> <p>show more / show less</p> </div> <div id="slide9"> <h4>classroom instruction:</h4> <ul class="services"> <li>osha subpart l scaffold safety regulations</li> <li>safety training requirements users, erector & competent person</li> <li>competent person’s role & responsibilities</li> <li>scaffold inspection process</li> <li>multi user / indemnification process</li> <li>applications , components associated frame, system, suspended, tube & clamp , mobile scaffolding</li> <li>fall protection/ guardrail guidelines</li> <li>requirements ties , affect of wind force on scaffolds</li> <li>scaffold planks & platform requirements</li> <li>scaffold egress</li> <li>accidents & fatal statistics</li> <li>written exam</li> </ul> <h4>hands on instruction:</h4> <ul class="services"> <li>erection & inspection of scaffolding provided client if available</li> <li>we finish open discussion</li> </ul> </div> <div class="content"> <h3>fall protection guidelines & equipment user</h3> <p> fall protection class uses real-world examples enhance understanding of diverse , complex requirements under stringent <span class="theme">osha fall protection</span> standard. presentation of photographs , videos of actual job-sites , hands on practice helps students see benefits , limitations of many fall protection systems , how can used work safely. employees receive acknowledgement of completion & wallet card upon completion of training.</p> </div> <div id="click10"> <p>show more / show less</p> </div> <div id="slide10"> <h4>required topics:</h4> <ul class="services"> <li>regulatory requirements under (29 cfr 1926.500)</li> <li>principles of fall protection , hazards</li> <li>fall arrest systems , components</li> </ul> <h4>topics presented:</h4> <ul class="services"> <li>subpart m regulations</li> <li>accidents & fatal statistics</li> fall protection systems, include guardrail systems, safety nets, personal fall arrest systems, safety monitoring systems, controlled access zones, hole covers, , warning lines. <li>each system discussed in detail.</li> <li>approved engineered / manufactured systems , components</li> <li>approved anchorage points</li> <li>approved connectors</li> <li>fall distance anchor point lower level</li> <li>written exam</li> <li>we finish open discussion</li> </ul> <h4>fall protection devices hands on:</h4> <ul class="services"> <li>full body harness & lanyard- fit , inspect body harness</li> <li>anchor connectors- cross arm strap & beam clamp</li> </ul> </div> <div class="content"> <h3>fire protection & extinguisher use</h3> <p> purpose of class identify potential fire hazards @ work place, fire protection methods include storage of flammable / combustible materials , fire protection planning. presentation of photographs of actual job-sites , hands on practice helps students identify potential fire exposure @ work place. employees receive acknowledgement of completion & wallet card upon completion of training.</p> </div> <div id="click11"> <p>show more / show less</p> </div> <div id="slide11"> <h4>required topics:</h4> <ul class="services"> <li>regulatory requirements under (29 cfr 1926.150) osha subpart f</li> <li>fire elements & hazards</li> <li>the fire triangle - oxygen, fuel & heat</li> <li>identify different classes of fires - type a, b, c, d, k, carbon dioxide, halogen, etc.</li> </ul> </div> </div> </div> <!--main div -->
you can try selecting wildcard:
$(document).ready(function(){ $("[id^=click]").each(function(_, value) { $(value).click(function(){ var myid = $(this).attr('id').replace('click',''); $("#slide"+myid).slidetoggle("slow"); }); }); }); check demo fiddle.
note: elements id starts click, not 'click' through 'click19'. mean, clickanything also toggle #slideanything.
Comments
Post a Comment