Currently, I am faced with a challenge involving a lengthy case study that includes numerous images. The loading time for the page is exceptionally long due to the high number of images. To address this issue, I have implemented a method using show and hide jQuery to conceal all images in a section that exceed 3. This involves manually assigning the target ID to the div that I wish to display. However, my dilemma lies in figuring out how to apply this code to target every section, rather than just one. Using the target ID multiple times is not feasible, as it can only be used once.
<button class="Show">Show</button>
<button class="Hide">Hide</button>
<button class="toggle">Show & Hide</button>
<div id="target"></div>
body {padding:30px;}
#target { display:none;}
.Hide{ display:none;}
$('.Show').click(function() {
$('#target').show(200);
$('.Show').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('#target').hide(500);
$('.Show').show(0);
$('.Hide').hide(0);
});
$('.toggle').click(function() {
$('#target').toggle('slow');
});
I am seeking a more efficient solution that does not involve simply copying and pasting the code while altering the target DIV name repeatedly. Any suggestions or guidance on how to achieve this would be greatly appreciated. You can view my pen here: