Jquery - Make a link clickable in a div which appears/disappears when clicked
Question
I need a div to appear and disappear when clicked. I managed to do it with Jquery.
Inside this div, I would like a link to be clickable too. The issue is that Jquery intercepts the click on the div before the link in itself.
How to solve this issue?
Thanks a lot
$(document).on('click', '.warningmessagenew', function(event) { event.preventDefault(event); console.log("starting"); var shorttextdiv = $(this).children(".shorttext")[0]; var longtextdiv = $(this).children(".longtext")[0]; console.log(shorttextdiv); if ($(shorttextdiv).css('display') === 'none') { $(shorttextdiv).show(); $(longtextdiv).hide(); } else { $(shorttextdiv).hide(); $(longtextdiv).show(); } });
.warningmessagenew { max-width: 700px; margin-right: auto; margin-left: auto; margin-top: 20px; }.shorttext { width: 100%; text-align: center; color: #bbcadf; font-size: 0.8em; cursor: pointer; margin-bottom: 30px; }.longtext { display: none; margin-right: auto; margin-left: auto; border-style: solid; border-radius: 5px; padding: 10px 10px 10px 10px; margin-bottom: 25px; line-height: 1.2em; width: 100%; }.longtextdesc { display: inline-block; margin-bottom: 10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,DOCTYPE html> <html lang="fr"> <body> <div class="warningmessagenew d-flex"> <div class="shorttext">(Aide)</div> <div class="longtext"> <p>Lorem ipsum dolor sit amet, consectetur </p> <p> cf <a href="/risk/" id="covidarticles" class="exceptionlink" target="_blank">Lorem ipsum dolor sit amet.</a> consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leoLorem ipsum dolor sit amet. consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amet. consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo </p> </div> </div>
1 answers
solution1
0 2021-04-12 13:00:08
Try the below snippet.
$(document).on('click', '.shorttext', function(event) { event.preventDefault(event); var shorttextdiv = $(this)[0]; var longtextdiv = $(this).next(".longtext")[0]; if ($(longtextdiv).css('display') === 'none') { $(longtextdiv).show(); } else { $(longtextdiv).hide(); } });
.warningmessagenew { max-width: 700px; margin-right: auto; margin-left: auto; margin-top: 20px; }.shorttext { width: 100%; text-align: center; color: #bbcadf; font-size: 0.8em; cursor: pointer; margin-bottom: 30px; }.longtext { display: none; margin-right: auto; margin-left: auto; border-style: solid; border-radius: 5px; padding: 10px 10px 10px 10px; margin-bottom: 25px; line-height: 1.2em; width: 100%; }.longtextdesc { display: inline-block; margin-bottom: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,DOCTYPE html> <html lang="fr"> <body> <div class="warningmessagenew d-flex"> <div class="shorttext">(Aide)</div> <div class="longtext"> <p>Lorem ipsum dolor sit amet, consectetur </p> <p> cf <a href="/risk/" id="covidarticles" class="exceptionlink" target="_blank">Lorem ipsum dolor sit amet.</a> consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leoLorem ipsum dolor sit amet. consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amet. consectetur adipiscing elit, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo </p> </div> </div>
Here is also jsfiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JQuery: div appears and disappears normally but second time clicked it does not work
Jquery show div when link gets clicked
make div clickable with jquery
Jquery Nav disappears when clicked on
jquery: keep <a> link clickable in clickable div
jQuery How to make links in a div work when the entire div is clickable
jQuery How to make a popup Appears / Disappears on timer?
Close div when other div link is clicked jquery
Make div clicked with jQuery
How to make hidden div which appears when file is found?
Related Tags