I'm pretty good with HTML and CSS but when it comes to JavaScript - it just slips right off me. I've found great answers here but if it doesn't match exactly what I need I'm helpless to adapt it. Here's the project so far...
I have a group of articles with the classes “title_div story1”, “title_div story2”, “title_div story3”, etc. The user only sees the first few lines of each. The remainder of the lines in each article have the class “hidden_div”. When user clicks anywhere on an article the hidden_div for that article is revealed with a "slideDown". Click again and the hidden_div is hidden again with "slideUp". Click on another article and the first article slides up while the new one slides down, and so on.
So far so good - except I found that many users don't click unless they are somehow alerted that there is more to see. So, to cue users, I added the text “Read more” at the end of the visible lines of each article. I gave this text the class “faux-link” and styled it like a hyperlink.
The problem is that I want the text on the clicked article to toggle from “Read more” to “Read less” depending on the revealed state of the hidden_div.
I hope someone can help me finish what I've started here.
Here's the JavaScript I've been using and it works great except for that last little problem described above:
<script type="text/javascript">
$(document).ready(function()
{
$(".title_div").click(
function () {
var div = $(this).attr('rel');
$(".hidden_div").slideUp("fast");
if ($("#"+div).is(":hidden"))
{
$("#"+div).slideDown("fast");
} else {
$("#"+div).slideUp("fast");
}
});
});
</script>
~~~~~ Using info from Washington Guedes I made these changes but the "read less" remained if the article wasn't closed before another was opened...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(".title_div").click(function()
{
var div = $(this).attr('rel');
div = $("#" + div);
$(".hidden_div").slideUp("fast");
if (div.is(":hidden"))
{
div.slideDown("fast");
$(".faux-link", this).html("Read less");
// : search for class "faux-link" in this ".title_div" context and change its html text.
} else {
div.slideUp("fast");
$(".faux-link", this).html("Read more");
}
});
});
</script>
<style type="text/css">
.title_div {
margin-bottom: 6px;
margin-left: 24px;
width: 100%;
float: left;
background-color: #6CC;
}
.faux-link {
color: #233b92;
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Lorem story 1 -->
<div class="title_div" rel="story1">
<h3>Story1</h3>
<p>Visible section of the profile article. </p>
<div id="story1" class="hidden_div" style=" display:none;">
<p>Inside the hidden_div1.</p>
<p>Inside the hidden_div1.</p>
<p>Inside the hidden_div1.</p>
<p>Inside the hidden_div1.</p>
</div><!-- /hidden story 1 -->
<p class="faux-link">Read more...</p>
</div><!-- /title-div 1 -->
<!-- Lorem story 2 -->
<div class="title_div" rel="story2">
<h3>Story2</h3>
<p> Visible section of the profile article. </p>
<div id="story2" class="hidden_div" style=" display:none;">
<p>Inside the hidden_div2.</p>
<p>Inside the hidden_div2.</p>
<p>Inside the hidden_div2.</p>
<p>Inside the hidden_div2.</p>
</div><!-- /hidden story 2 -->
<p class="faux-link">Read more...</p>
</div><!-- /title-div 2 -->
<!-- Lorem story 3 -->
<div class="title_div" rel="story3">
<h3>Story3</h3>
<p> Visible section of the profile article. </p>
<div id="story3" class="hidden_div" style=" display:none;">
<p>Inside the hidden_div3.</p>
<p>Inside the hidden_div3.</p>
<p>Inside the hidden_div3.</p>
<p>Inside the hidden_div3.</p>
</div><!-- /hidden story 3 -->
<p class="faux-link">Read more...</p>
</div><!-- /title-div 3 -->
<!-- Lorem story 4 -->
<div class="title_div" rel="story4">
<h3>Story4</h3>
<p> Visible section of the profile article. </p>
<div id="story4" class="hidden_div" style=" display:none;">
<p>Inside the hidden_div4.</p>
<p>Inside the hidden_div4.</p>
<p>Inside the hidden_div4.</p>
<p>Inside the hidden_div4.</p>
</div><!-- /hidden story 4 -->
<p class="faux-link">Read more...</p>
</div><!-- /title-div 4 -->
</body>
</html>
You can do this:
$(document).ready(function(){
$(".title_div").on("click", function(){
var div = $(this).attr('rel');
div = $("#" + div);
$(".hidden_div").slideUp("fast");
$(".faux-link").html("Read more");
// : all "faux-link" get "Read more" text
if (div.is(":hidden")) {
div.slideDown("fast");
$(".faux-link", this).html("Read less");
// : only the "faux-link" of this ".title_div" get "Read less" text
} else {
div.slideUp("fast");
}
});
});