I've created a div with the id #myList, which contains 8 sub-divs each with an image.
My goal is to initially load the first 3 images and then have the ability to load more when clicking on load more.
I attempted to follow this jsfiddle example
Below is my code, similar to the example but not functioning for some unknown reason:
<div id="mylist" class="autoplay123company">
<div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">
<img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/gtbank__1.jpg" alt="" style="height:100px !important;" width="150" height="100">
</div>
<div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">
<img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/partner-MTN.png" alt="" style="height:100px !important;" width="150" height="100">
</div>
<div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">
<img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/Partner-airtel.png" alt="" style="height:100px !important;" width="150" height="100">
</div>
...
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>#myList div.col-lg-4 {
display: none;
}
#loadMore {
color: green;
cursor: pointer;
}
#loadMore:hover {
color: black;
}
#showLess {
color: red;
cursor: pointer;
}
#showLess:hover {
color: black;
}I would appreciate any help in getting it to work. You can view my edited jsfiddle here