Develop Reference

How can I condense this Jquery Code? [closed] - javascript

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I've been learning Jquery for a while now, and I've created a script that when I click on a div(#click) another div(#slide) will slide down and show the content inside. Below is the script I've written to do this for me, but I feel like it is too repetitive . There must be a better way of achieving the same results, but with much less code. I've googled but haven't been able to find any solutions, Any 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 this is ugly, but The only clue I have is to use the keyword (this), but I do not know how to implement it. So help would be greatly appreciated.
here is the HTML:
<div id="main">
<div class="content">
<img src="images/training.jpg" alt="banner" class="pic"/>
<h3>10 Hour Construction</h3>
<p> This <span class="theme">10 Hour</span> program is intended to provide instruction on a variety of construction safety and
health standards to entry-level participants. Your employees will receive an acknowledgement of
completion & wallet card upon completion of the 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 to OSHA- 2 Hours</li>
<li>Focus Four - 4 Hours: Fall Protection- Minimum 1hr. 15 Minutes, Electrical-Minimum 30 Minutes, Struck by
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 and Disposal, Subpart H</li>
<li>Tools- Hand and 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 and Disposal</li>
<li>Subpart N: Cranes, Derricks, Hoists, Elevators, and 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 and 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 and Prevention</li>
<li>Subpart G: Signs, Signals, and Barricades</li>
<li>Subpart I: Tools – Hand and Power</li>
<li>Subpart J: Welding and Cutting</li>
<li>Subpart Q: Concrete and 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 and Use of Explosives</li>
<li>Subpart V: Power Transmission and Distribution</li>
<li>Subpart W: Rollover Protective Structures</li>
<li>Subpart Z: Toxic and 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> This <span class="theme">10 Hour</span> program is intended to provide instruction on a variety of general industry safety and
health standards to entry-level participants. Your employees will receive an acknowledgement of
completion & wallet card upon completion of the 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 to OSHA- 2 Hours</li>
<li>Walking and Working Surfaces, including fall protection – 1 Hour</li>
<li>Exit Routes, Emergency Action Plans, Fire Prevention Plans, and 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 and Power, Subpart I</li>
<li>Materials Handling</li>
<li>Machine Guarding</li>
<li>Introduction to 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> This <span class="theme">30 Hour</span> program is intended to provide instruction on a variety of construction safety and health
standards to entry-level and intermediate-level participants. Your employees will receive an
acknowledgement of completion & wallet card upon completion of the 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 to 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
by 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 and Related General
Safety and Health Provisions"; Safety Programs</li>
<li>Fire Protection and Prevention, Subpart F</li>
<li>Material Handling, Storage, Use and Disposal, Subpart H</li>
<li>Tools- Hand and Power, Subpart I</li>
<li>Welding and Cutting, Subpart J</li>
<li>Scaffold, Subpart L</li>
<li>Cranes, Derricks, Hoists, Elevators, and Conveyers, Subpart N</li>
<li>Motor Vehicles, Mechanized Equipment and Marine Operations; Rollover Protective Structures and Overhead</li>
<li>Protection; and Signs, Signals and Barricades, Subpart O, W and G</li>
<li>Excavations, Subpart P</li>
<li>Concrete and 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 and Prevention</li>
<li>Subpart G: Signs, Signals, and Barricades</li>
<li>Subpart I: Tools – Hand and Power</li>
<li>Subpart J: Welding and Cutting</li>
<li>Subpart Q: Concrete and Masonry Construction</li>
<li>Subpart R: Steel Erection</li>
<li>Subpart S: Underground Construction, Caissons, Cofferdams and Compressed Air</li>
<li>Subpart T: Demolition</li>
<li>Subpart U: Blasting and Use of Explosives</li>
</ul>
</div>
<div class="content">
<h3>30 Hour General Industry</h3>
<p> This <span class="theme">30 Hour</span> program is intended to provide instruction on a variety of general industry safety and health
standards to entry-level and intermediate-level participants. Your employees will receive an
acknowledgement of completion & wallet card upon completion of the 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 to OSHA - 2 Hours</li>
<li>Managing Safety & Health - 2 Hours</li>
<li>Walking and Working Surfaces, including Fall Protection - 1 Hour</li>
<li>Exit Routes, Emergency Action Plans, Fire Prevention Plans, and 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 and Combustible Liquids, Spray Finishing, Compressed Gases, Dipping and Coating Operations)</li>
<li>Permit-Required Confined Spaces</li>
<li>Lockout / Tagout</li>
<li>Machine Guarding</li>
<li>Welding, Cutting, and Brazing</li>
<li>Introduction to Industrial Hygiene</li>
<li>Bloodborne Pathogens</li>
<li>Ergonomics</li>
<li>Fall Protection</li>
<li>Safety and 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 the mandatoryor elective topics.</li>
<li>The minimum length of any topic is one-half hour.</li>
</ul>
</div>
<div class="content">
<h3>Aerial Boom Lift / Scissor Lift Operator Safety Course</h3>
<p> This program consists of classroom instruction and hands-on performance testing. The hands-on
training will be conducted at your location on your equipment. Your employees will receive an
acknowledgement of completion & wallet card upon completion of the training. Listed below are the
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 ( all hydraulic components must be retracted to get 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 to Positioning - Ramp, Direction of Travel- Directional Arrows, Emergency Shutdown</li>
<li>Equipment Stability - Center of Gravity, Personnel & Load Capacity</li>
<li>Egress to Platform - 3 points of contact, Body position for exiting</li>
<li>Transfer to Structures from the Equipment</li>
<li>Electrical Hazards - Minimum Approach Distance</li>
<li>Fall Protection - Body Harness & Tie Off Points</li>
<li>Proper Shutdown of the Equipment</li>
<li>Repair & Maintenance - Authorized Personnel & Annual Inspection</li>
<li>Passenger Training Requirements & Communication</li>
<li>Load Capacity of the Personnel Platform</li>
<li>Written Exam</li>
</ul>
<h4>Hands On Instruction:</h4>
<ul class="services">
<li>Pre-operation Inspection of the Equipment</li>
<li>Work Site Assessment</li>
<li>Function & Controls Testing</li>
<li>Hands on Performance Testing</li>
<li>Steps to Shut Down the 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 to the manufacturer, all employees who operate heavy equipment must be trained and
qualified by the company. In this course, we will train the student in the skills needed to safely
operate heavy equipment. Hands-on operation will also be performed on heavy equipment provided
by your company. Your employees will receive an acknowledgement of completion & wallet card
upon completion of the 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, and precautions for heavy equipment the operator will be authorized
to operate</li>
<li>Pre operation Inspection</li>
<li>Heavy equipment controls and instrumentation: where they are located, what they do, and how they work</li>
<li>Steering and maneuvering</li>
<li>Visibility (including restrictions due to loading)</li>
<li>Vehicle capacity/ stability</li>
<li>Any vehicle inspection and maintenance that the operator will be required to perform</li>
<li>Refueling and/or charging and recharging of batteries</li>
<li>Any other operating instructions, warnings, or precautions listed in the operator’s manual for the types of vehicle that the employee is being trained to operate</li>
</ul>
<h4>Workplace-related topics:</h4>
<ul class="services">
<li>Surface conditions where the heavy equipment will be operated</li>
<li>Composition of loads to be carried and load stability</li>
<li>Pedestrian traffic in areas where the equipment will be operated</li>
<li>Hazardous (classified) locations where the equipment will be operated</li>
<li>Ramps and other sloped surfaces that could affect the equipment’s stability</li>
<li>Closed environments and other areas where insufficient ventilation or poor vehicle maintenance could cause a buildup of carbon monoxide or diesel exhaust.</li>
<li>Other unique or potentially hazardous environmental conditions in the workplace that could affect safe operation</li>
<li>Hands-on training conducted on your equipment at your facility</li>
<li>We will finish up with a written exam & open discussion.</li>
</ul>
</div>
<div class="content">
<h3>Rigging & Signal Communication Safety Training</h3>
<p> This program consists of classroom instruction and hands-on performance
testing. Power point Presentation & hands on instruction will be used to discuss
the general rigging procedures & OSHA guidelines. The hands-on training will be
conducted at your location using your 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, and Disposal</li>
<li>Designation of the Qualified Rigger - OSHA Subpart CC Training Requirements</li>
<li>Inspection & Maintenance of the Rigging Equipment</li>
<li>Work Site Assessment - Identification of Site Hazards</li>
<li>Determination of Load Weight & Load Capacity of the Rigging Equipment</li>
<li>Sling Angle Tensions - 90, 60, 45 and 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 the qualified Signal Person - Training Requirements</li>
<li>Rigger’s Hand Signal Card Review in Detail.</li>
<li>Establishing Communication- Hand Signals & Radio Communication with 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 to <span class="theme">OSHA (29 CFR 1910.178)</span>, all employees who operate a Powered Industrial Truck /
Rough Terrain Forklift must be trained and authorized by the company prior to operation. In this
course, we will train the student in the skills needed to safely operate a standard, rough terrain, gas-
propane and/or electric Forklift Truck. Hands-on practice using an actual Forklift through an
obstacle course is the highlight of this class. Your employees will receive an acknowledgement of
completion & wallet card upon completion of the 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, and precautions for the types of truck the operator will be authorized to operate</li>
<li>Differences between the truck and the automobile</li>
<li>Truck controls and instrumentation: where they are located, what they do, and how they work</li>
<li>Engine or motor operation</li>
<li>Steering and maneuvering</li>
<li>Visibility (including restrictions due to loading)</li>
<li>Fork and attachment adaptation, operation, and use limitations</li>
<li>Vehicle capacity</li>
<li>Vehicle stability</li>
<li>Any vehicle inspection and maintenance that the operator will be required to perform</li>
<li>Refueling and/or charging and recharging of batteries</li>
<li>Operating limitations</li>
<li>Any other operating instructions, warnings, or precautions listed in the operator’s manual for the types of
vehicle that the employee is being trained to operate</li>
</ul>
<h4>Workplace-related topics:</h4>
<ul class="services">
<li>Surface conditions where the vehicle will be operated</li>
<li>Composition of loads to be carried and load stability</li>
<li>Load manipulation, stacking, and unstacking</li>
<li>Pedestrian traffic in areas where the vehicle will be operated</li>
<li>Narrow aisles and other restricted places where the vehicle will be operated</li>
<li>Hazardous (classified) locations where the vehicle will be operated</li>
<li>Ramps and other sloped surfaces that could affect the vehicle’s stability</li>
<li>Closed environments and other areas where insufficient ventilation or poor vehicle maintenance could cause
a buildup of carbon monoxide or diesel exhaust.</li>
<li>Other unique or potentially hazardous environmental conditions in the workplace that could affect safe operation</li>
<li>Hands-on portion done on your machine at your facility</li>
</ul>
</div>
<div class="content">
<h3>Scaffolding User & Competency Safety</h3>
<p> The purpose of this course is to provide the scaffold erector, users and scaffold inspector the
knowledge of the OSHA regulations, safety guidelines, procedures and best work practices needed to
recognize and eliminate hazards in the field. This course supports the designation of the competent
person as required by OSHA. Your employees will receive an acknowledgement of completion &
wallet card upon completion of the 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 for the 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 and Components Associated with Frame, System, Suspended, Tube & Clamp and
Mobile Scaffolding</li>
<li>Fall Protection/ Guardrail Guidelines</li>
<li>Requirements for Ties and 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 by the client if available</li>
<li>We will finish with an open discussion</li>
</ul>
</div>
<div class="content">
<h3>Fall Protection Guidelines & Equipment User</h3>
<p> This fall protection class uses real-world examples to enhance the understanding of diverse and
complex requirements under the very stringent <span class="theme">OSHA fall protection</span> standard. A presentation of
photographs and videos of actual job-sites and hands on practice helps students to see the benefits
and limitations of many fall protection systems and how they can be used to work safely. Your
employees will receive an acknowledgement of completion & wallet card upon completion of the
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 and hazards</li>
<li>Fall arrest systems and their components</li>
</ul>
<h4>Topics Presented:</h4>
<ul class="services">
<li>Subpart M Regulations</li>
<li>Accidents & Fatal Statistics</li>
Fall protection systems, which include guardrail systems, safety nets, personal fall arrest
systems, safety monitoring systems, controlled access zones, hole covers, and warning lines.
<li>Each system will be discussed in detail.</li>
<li>Approved Engineered / Manufactured Systems and Components</li>
<li>Approved Anchorage points</li>
<li>Approved connectors</li>
<li>Fall distance from anchor point to lower level</li>
<li>Written Exam</li>
<li>We will finish with an open discussion</li>
</ul>
<h4>Fall Protection Devices Hands On:</h4>
<ul class="services">
<li>Full body harness & lanyard- We will fit and inspect the body harness</li>
<li>Anchor connectors- cross arm strap & beam clamp</li>
</ul>
</div>
<div class="content">
<h3>Fire Protection & Extinguisher Use</h3>
<p> The purpose of this class is to identify potential fire hazards at the work place, fire protection
methods to include storage of flammable / combustible materials and fire protection planning. A
presentation of photographs of actual job-sites and hands on practice helps students to identify
potential fire exposure at the work place. Your employees will receive an acknowledgement of
completion & wallet card upon completion of the 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 by a 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: This will get all elements whose id starts with click, not only from 'click' through 'click19'. I mean, clickANYTHING would also also toggle #slideANYTHING.

Try this:
$( "[id^='click']" ).click(function () {
$("#"+$(this).attr("id").replace("click", "slide")).slideToggle("slow");
});

Give them an attribute to tie them together for example:
$('.click').click(function () {
$($(this).attr('data-toggle-target')).slideToggle('slow');
});
<div class="click" data-toggle-target="#click12">I trigger a slide toggle</div>
You could use anything you want to really tie them together. Often if you are using links its best to jsut use a hash ref like:
<a class="click" href="#the-target">I trigger a slide toggle</a>
That way if js isnt enabled it jumps to the dive youd be toggling. and if it is you get the toggle - though if you do this you need to prevent default:
$('a.click').click(function (e) {
e.preventDefault();
$($(this).attr('href')).slideToggle('slow');
});

Add a class to the html element you click and you can use a data attribute to hold your value
<div class="clickme" data-something="1"></div>
$(".clickme").click(function(){
var targetNum = (this).data("something");
var targetId = "#slide" + targetNum;
$(targetId).slideToggle("slow");
});

You haven't shown your HTML which would be greatly help guide an answer, but assuming you have a structure like:
<div id="click"></div>
<div id="slide"></div>
<div id="click2"></div>
<div id="slide2"></div>
etc.
Then you could instead do something like
<div class="click"></div>
<div class="slide"></div>
<div class="click"></div>
<div class="slide"></div>
etc.
And write your jQuery like
$(".click").click(function() {
$(this).next(".slide").slideToggle("slow");
}
The approach of using classes instead of ID's should be your general approach. The only variable would be what to use where I have listed next(".slide") as this may vary based on how the HTML elements are placed relative to one another.

This works, but I think there may be a better solution still
for ( i= 0; i < 12; i++){
var x = (i !== 0) ? + i : '' ;
$("#click" + x).data('slide', x).on('click', function(){
var slide = $(this).data('slide');
$("#slide" + slide).slideToggle("slow");
});
};
http://jsfiddle.net/x9eCM/1/

Related

How to make a pop-up information box when you click an element.
Example like this image :
Like this image, you click "View all study equipment" an element and then get that pop-up for more information.
This is my code :
<>
<div className="description-container">
<div className="nav-tab">
<ul className="description-tab">
<li>
<a href="/" className="active">
Class Description
</a>
</li>
<li>
Testimony
</li>
<li>
FAQ
</li>
</ul>
</div>
</div>
<div className="description-info">
<div className="desc-list">
<h2>Description</h2>
<p>
Websites in today's era have become a major need that cannot be
ignored. All business or education sectors can use the website as a
tool for promotion, exchange of information, and others. Based on data
from the World Wide Web Technology Surveys, of all active websites,
88.2% use HTML, 95.6% use CSS and 95% use JavaScript. This class
thoroughly discusses the basics of HTML, CSS and JavaScript as the
three foundations of website creation.
</p>
<ul>
<li>
<p>The web is a platform that can be accessed through many kinds of devices. This is an advantage if you develop Web-based applications.</p>
</li>
<li>
<p>Web development does not require a computer/laptop that has high specifications, so it is not an obstacle for those of you who do not have a capable device.</p>
</li>
<li>
<p>The website is a platform that is reached by search engines such as Google Search, so the website is suitable as a medium for promoting business or content.</p>
</li>
<li>
<p>Developing a website includes development that is easy to maintain and easy to publish.</p>
</li>
</ul>
</div>
<div className="specs-description-info">
<h4>Learning Equipment</h4>
<h5><i class="fas fa-microchip"></i>Processor</h5>
<span>Intel Celeron (Core i3 and above Recommended)</span>
<h4>Tools yang dibutuhkan untuk belajar:</h4>
<span><i class="fad fa-window"></i>Web Browser (Google Chrome atau Mozilla Firefox)</span>
<br />
<br />
<a className="equip_info" href="/">View all study equipment</a>
</div>
</div>
<div className="sub-border-description-info">
<h3>Student Targets and Goals :</h3>
<ul>
<li>
<p>This class is intended for beginners who want to start their career in the field of web development (web creation) and need a strong foundation or foundation before studying deeper in the web field, with reference to international standards owned by Google Developers.</p>
</li>
<li>
<p>Classes can be attended by students who are IT literate so it is mandatory to have and be able to operate a computer well.</p>
</li>
<li>
<p>This class is designed for beginners so there are no prerequisites in prior understanding of programming.</p>
</li>
<li>
<p>Students must be able to learn independently, be committed, really have curiosity, and be interested in the subject matter, because no matter how good this class material is, it will not be useful without students' seriousness to learn, practice, and try.</p>
</li>
</ul>
</div>
<div className="subdescription-info">
<h3>General and Specific Objectives of the Training :</h3>
<ul>
<li>
<p>At the end of the training, participants can create a simple website using programming code that complies with global standards.</p>
</li>
<li>
<p>Build a website using simple HTML, CSS, and JavaScript code.</p>
</li>
<li>
<p>Implement a good website structure using standard semantic HTML.</p>
</li>
<li>
<p>Demonstrating the preparation of website layouts using float or flexbox techniques.</p>
</li>
</ul>
</div>
</>
Maybe you can share how to make it with React Javascript and CSS too.
This is using newest react.
Thank You

So, what you can do is use the useState hook. Let me explain:
first, import the usestate hook, check the react docs on how to do that, but if youre using vs code it will probably do that for you if you type the next part -->
this will create a state oject (popup) with the default value of false, that can be altered by the togglepopup function:
const [popup, togglepopup] = useState(false);
Then in your button/element you want to use to toggle the popup write:
onClick={togglepopup(!popup)}
this will change the current popup value to the oposite value, e.x. false => true, true => false.
then just create a piece of javascript that looks like this:
{popup && <div className={'popup-bg'}>
<div className={'popup'}></div></div>}
now just set the popup-bg in your stylesheet to position: fixed, width: 100vw, height: 100vw, display: flex, align-items: center, justify-content: center, backdropfilter: blur(10px);
and now it will center your popup div.

I'm having some issues with keeping the accordion open whilst clicking links within that accordion dropdown. It's a careers page and when I open the individual jobs, I want users to be able to open the application in a new tab. Any ideas?
https://www.trinovainc.com/careers.html
<div class="accordion">
<div class="accordion-panel careers" data-id="panel-1">
<div class="accordion">
<h4><a class="accordion-title">Application Engineer - Mobile, AL<span class="ion-chevron-down"></span></a></h4>
</div>
<div class="accordion-panel-content panel-1">
<p>TriNova is looking for an energetic and personable candidate who is a self-motivated and well-organized professional to join our team as an Application Engineer.</p>
<h4>Summary</h4>
<ul>
<ul>
<li>Provides in-depth product and application knowledge for TriNova and customers; specifically providing inside sales support for account managers. Duties to include reviewing of specifications, verifying model codes, quoting, ordering, expediting and communicating with the customer and sales force.</li>
</ul>
</ul>
<h4>PRIME RESPONSIBILITIES</h4>
<ul>
<ul>
<ul>
<li>Review all types of applications that consist of but not limited to: sizing valves, choosing instruments, sizing gamma, sizing flowmeters and creating electrical & PID drawings for various types of field instrument panels.</li>
<li>Review specifications and provide model codes for products.</li>
<li>Perform CAD drawings of best practice installation and wiring</li>
<li>Communicate with the customer, outside salespeople, manufacturers and the Area Vice President.</li>
<li>Understand commercial issues and terms.</li>
<li>Field visits with account managers for relationship development, training and as required to optimize the order process and achieve customer satisfaction</li>
<li>Improve product and technical knowledge.</li>
<li>Troubleshooting of basic device issues.</li>
</ul>
</ul>
</ul>
<h4>MINIMUM EDUCATION</h4>
<ul>
<ul>
<ul>
<li>Bachelor’s Degree in Engineering.</li>
<li>Minor in Sales Engineering is a plus</li>
</ul>
</ul>
</ul>
<h4>TRAVEL</h4>
<ul>
<ul>
<ul>
<li>Occasional travel required.</li>
</ul>
</ul>
</ul>
<h4>PREVIOUS JOB EXPERIENCE</h4>
<h4>Desired:</h4>
<ul>
<ul>
<ul>
<li>Previous related experience of at least 2 years</li>
</ul>
</ul>
</ul>
<h4>Required:</h4>
<ul>
<ul>
<li>None</li>
<ul></ul>
</ul>
</ul>
<a class="button orange apply" href="https://www.trinovainc.com/job-application.html" target="_blank">Apply Now</a>
</div>
</div>
</div>

Use event.stopPropagation():
In Javascript you have event bubbling, which means that whenever an event is fired for an element. That event bubbles up to all the parent elements. This means if you have an onlick for the accordion to close it and you click a button (or anything else) inside of it, it will close. You can prevent this by using event.stopPropagation(). This will stop the event from propagating up the DOM structure.
Example:
function prop(e){
console.log(e.currentTarget);
}
function notProp(e){
console.log(e.currentTarget);
e.stopPropagation();
}
<div id="propagated" onclick="alert('Bubbled')"><button onclick="prop(event)">Click</button></div>
<div id="notpropagated" onclick="alert('OH NO')"><button onclick="notProp(event)">Click</button></div>

I am not able to get the data from the below content using jsoup. Can you please suggest me how to get the title,date,href,description of that href using jsoup. Please suggest me using javascript how can i handle it. Finally i should have two rows with the above specified columns which is under div tag. I have tried it by using this way
Jsoup = org.jsoup.Jsoup;
Whitelist = org.jsoup.safety.Whitelist;
OutputSettings = org.jsoup.nodes.Document.OutputSettings;
EscapeMode = org.jsoup.nodes.Entities.EscapeMode;
doc = Jsoup.parse(html);
os = OutputSettings().escapeMode(EscapeMode.xhtml).charset("utf-8");
var title = doc.outputSettings(os).select("a[href]").text();
var links = doc.outputSettings(os).select("a").attr("href");
But after writing that i got everything in one row. Along with that is there any we can get hyperlink description. I want two rows for the below data.
<div class="section">
<div class="row">
<div class="col-sm-12">
<p>Dec 18, 2014, 11:00 ET</p>
<ul>
<li><a title="SANS Honors People Who Made a Difference in Cybersecurity in 2014" href="http://www.prnewswire.com/news-releases/sans-honors-people-who-made-a-difference-in-cybersecurity-in-2014-300011928.html">SANS Honors People Who Made a Difference in Cybersecurity in 2014</a></li>
<li> SANS Institute is pleased to announce the winners of the SANS 2014 Difference Makers awards. While the headlines focus on security breaches, there are thousands of security practitioners out there who are quietly succeeding and keeping their companies and customers safe from attacks. The SANS... </li>
<li>More news about: <a title="SANS Institute">SANS Institute</a> </li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-9">
<p>Dec 17, 2014, 07:00 ET</p>
<ul>
<li><a title="Microsemi's Ultra-secure SmartFusion2 SoC FPGAs and IGLOO2 FPGAs Recognized on EDN's List of Hot 100 Products of 2014" href="http://www.prnewswire.com/news-releases/microsemis-ultra-secure-smartfusion2-soc-fpgas-and-igloo2-fpgas-recognized-on-edns-list-of-hot-100-products-of-2014-300010576.html">Microsemi's Ultra-secure SmartFusion2 SoC FPGAs and IGLOO2 FPGAs Recognized on EDN's List of Hot 100 Products of 2014</a></li>
<li>  Microsemi Corporation (Nasdaq: MSCC), a leading provider of semiconductor solutions differentiated by power, security, reliability and performance, today announced its SmartFusion2® SoC FPGAs and IGLOO2® FPGAs were recognized among the Hot 100 Products of 2014 by EDN. Among the many... </li>
<li>More news about: <a title="Microsemi Corporation">Microsemi Corporation</a> </li>
</ul>
</div>
<div class="col-sm-3">
<a title="Microsemi's Ultra-secure SmartFusion2 SoC FPGAs and IGLOO2 FPGAs Recognized on EDN's List of Hot 100 Products of 2014" href="http://www.prnewswire.com/news-releases/microsemis-ultra-secure-smartfusion2-soc-fpgas-and-igloo2-fpgas-recognized-on-edns-list-of-hot-100-products-of-2014-300010576.html"> <img src="http://photos.prnewswire.com/prnthumb/20110909/MM66070LOGO" alt="Microsemi Corporation."> </a>
</div>
</div>

So i've managed to figure out how to get scrollspy working, however I'm not realizing that my table of contents is too long for the navigation. I'm wondering how I can add an accordion type functionality so that my navbar table of contents will collapse after it has scrolled passed an associated anchor. I'm essentially looking for the same type of functionality that the bootstrap website has for it's affixed sidebar. I have looked at this: Using bootstrap scrollspy for a div with collapse, to an affixed sidebar
but I'm not sure if thats the same thing I'm looking for. I've also considered using the TOCIFY plugin written by Greg Franko, but i'm not sure how to implement it. I've been reading the TOCIFY documentation but i'm not really sure what it is I have to change.
Currently my scrollspy functionality is working with this setup:
<body data-spy="scroll" data-offset="0" data-target="#navbar" style="">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" id="navbar">
<ul class="nav nav-tabs nav-stacked affix">
<li class="active h2-link">Executive Summary</li>
<ul>
<li class="h3-link">Defining Mental Health</li>
<li class="h3-link">Review Process</li>
<li class="h3-link">Findings and Recommendations</li>
<li class="h3-link">Acknowledgement</li>
</ul>
<li class="h2-link">Preamble</li>
<li class="h2-link">Section One: Our Context</li>
<ul>
<li class="h3-link">Mount Royal University: A World of Difference</li>
<ul>
<li class="h4-link">Mount Royal's Vision</li>
<li class="h4-link">Mount Royal's Mission</li>
<li class="h4-link">Mount Royal's Guiding Principles</li>
</ul>
<li class="h3-link">Health and Safety at Mount Royal University</li>
<li class="h3-link">Student Services Plan</li>
<li class="h3-link">Rationale for a Student Mental Health Strategy</li>
</ul>
</ul>
</div>
<div class="span9">
<h2 id="executive-summary">Executive Summary</h2>
</a>
<h3 id="two">Introduction & Background</h3>
<p class="ParagraphText">Mount Royal University (MRU) has a long-standing history
of student-centered leadership and learning. We are known to be an institution
that cares about the success and the health of our students, and we have strong
services that support mental health promotion and respond well to mental health
issues and concerns. In addition to excellent service providers, MRU has many
positive practices and policies in place to support students. Recent trends
suggest that the prevalence of mental health issues is on the rise among young
adults. More students are entering into university with pre-existing mental health
conditions, more are seeking help, and often issues are complex and
multifaceted. Given that rates of mental illness are on the rise, and given
that our student population has reported stress levels higher than other students
at post-secondary institutions in North American, a review of our student mental
health practices and procedures was warranted.</p>
You can see it working here: https://googledrive.com/host/0BwvPQbnPrz_LTlBjelIwemxaZzg/index.html
I'd be grateful for any help or suggestions. I apologize if my research was not extensive enough and this has already been answered.

here is my site: http://web.njit.edu/~dp257/boilerplate/Org.html
click on the side bar world wide web, all i want it to do is scroll down or jump down the page to that Div(worldwideweb definition) but instead it like deletes the rest of the page except for that div. how come?
heres my website code:
<div id="wrapper">
<header id="name" align="center">IS117 TERMS</header>
<div id="primary_links" align="center">
<ul>
<li>Home</li>
<li>CSS</li>
<li>HTML</li>
<li>Organizations</li>
<li>Technologies</li>
</ul>
</div>
<div id="content">
<h1>Organizations</h1>
<div>
Client- the computers and devices that use web applications
</div>
<div>
Internet exchange point-a point in the world that connect many WAN’s
</div>
<div>
Internet- global system of interconnected networks
</div>
<div>
Internet service provider- Someone or company who owns a WAN and leases its access to their network
</div>
<div>
Intranet- network where only employees can run web applications typically they are in the same area
</div>
<div>
Local area network- a small network of computers that are near each other and communicate over short distances
</div>
<div>
Network-a system that allows clients and servers to communicate
</div>
<div>
W3C-world wide web consortium, group that develops standards, for code
</div>
<div>
Web browser-programs that access web pages
</div>
<div>
Web server- holds the files that make up a web application
</div>
<div>
WHATWG-community of people interested in evolving html, big source of info
</div>
<div>
Wide area network-2 or more LAN’s connected by a router
</div>
<div id="zz">
World Wide Web- components that bring together a web page to your desktop over the internet
</div>
</div> <!-- content -->
<div id="sidebar">
<div id="secondary_links">
<ul>
<li>Client</li>
<li>Internet Exchange Point</li>
<li>Internet</li>
<li>Internet Service Provide</li>
<li>Intranet</li>
<li>Local Area Network</li>
<li>Network</li>
<li>W3C</li>
<li>Web Browser</li>
<li>Web Server</li>
<li>WHATWG</li>
<li>Wide Area Network</li>
<li>World Wide Web</li>
</ul>
</div>
</div>
</div>

There's a lot of funky stuff going on in that page. I recommend starting with just validating the HTML. You can validate it here - http://html5.validator.nu/?doc=http%3A%2F%2Fweb.njit.edu%2F%7Edp257%2Fboilerplate%2FOrg.html Don't worry about the "X-UA-Compatible" error, but you should definitely get the others fixed and then go from there.