I am facing an issue where, while trying to search for a specific word to highlight it, the "show more" button closes and only displays the text prior to clicking the button. How can I ensure that the expanded content remains open while searching for a word?
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="../bootstrap/test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<input class="text_search" id=x placeholder="text">
<div id=text_x>
<div class="col-sm-4">
<p class="content">
Several Australian home owners have been utilizing the services of mortgage brokers to fulfill their dreams of owning a house at an affordable rate.
</p>
<p class="more-cont" style="display:none;">
Whether you are aspiring to buy a new house or considering upgrading your existing home loan,
Mortgage broking involves the act of intermediating between the borrower and the lender on the borrower’s behalf. The role of a mortgage broker starts right from the time when you plan to...
</p>
<a class="Show_more_less">Show more</a>
</div>
...
</div>
</div>
</body>
</html>
This is my jQuery code:
$(document).ready(function(){
$('.Show_more_less').click(function(e) {
e.preventDefault();
$(this).text(function(i, t) {
return t == 'Show less' ? 'Show more' : 'Show less';
}).prev('.more-cont').slideToggle()
});
});
$(function() {
$(".text_search").each(function() {
var textModal = $('#text_' + this.id),html = textModal.html();
$(this).on("keyup", function() {
var reg = new RegExp($(this).val() || "&s;fakeEntity;", 'gi');
textModal.html(html.replace(reg, function(str, index) {
var t = html.slice(0, index+1),
lastLt = t.lastIndexOf('<'),
lastGt = t.lastIndexOf('>'),
lastAmp = t.lastIndexOf('&'),
lastSemi = t.lastIndexOf(';');
if(lastLt > lastGt) return str;
if(lastAmp > lastSemi) return str;
return '<span class='highlight'>' + str + '</span>';
}));
});
});
});
And here is my CSS code:
html, body {
margin: 0px;
width: 100vw;
height: 100%;
overflow-x: hidden;
font-family: Helvetica;
background-color: rgb(241, 238, 238);
}
.Show_more_less{
cursor: pointer;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
.text_search{
margin-left: 2em;
}