Can I use one function with multiple buttins to show hide multiple HTML Divs?

JavaScript
1

Hello everyone, I have this function that toggles between two CSS classes and shows/hide div content on an html page.

I want to have this function to work on multiple divs, but I do not know how to expand the function. Currently the div holding the more content is called: moreContent.

What I have done is create individual function for each instance that I want to call it on a specific div.

Example: Lets say I have 5 articles on a page. I want to add a button under each article that show/hide the more div. Currently I have only on and to put it on all 5 I have to duplicate the function and change the names
of the classes.

Here is the code:


<script type="text/javascript">
$(document).ready(function() {
$('.readMore').click(function(){
    $(this).toggleClass('readLess');
    $('.moreContent').toggle();
}); 
});
</script>
2

Use cascading stylesheets instead and change the parent class

Content .readMore{height:0;}
Content.open .readMore{height:auto;}

then you can just change the class of the id’d element “content”

onclick=function(){
o=document.getElementById("content");
if(o.className=="") o.className="open"; else o.className="";
}
3

If you are using the classes, then you need to do an .each function, then reference the specific moreContent element like so:

HTML

<div class="article">
	<p>Text text</p>
	<a class="readMore" href="#">Read More</a>
	<div class="moreContent">
		<p>Text text</p>
		<p>Text text</p>
	</div>
</div>
<div class="article">
	<p>Text text</p>
	<a class="readMore" href="#">Read More</a>
	<div class="moreContent">
		<p>Text text</p>
		<p>Text text</p>
	</div>
</div>
<div class="article">
	<p>Text text</p>
	<a class="readMore" href="#">Read More</a>
	<div class="moreContent">
		<p>Text text</p>
		<p>Text text</p>
	</div>
</div>

JS

$('.readMore').each(function(i) {
	$(this).on('click', function() {
		$(this).next().toggle();
	});
});
4

Thanks mate, this is exactly what I needed. But I had a readLess CSS class that shows on mouse image and a readless graphic when the button is clicked.
Example: The bottom has four state: ReadMore, readMore Hover, readLess and ReadLess Hover.
So when I mouse over the read more button, it dims when I click on it, the button than shows the ReadLess graphic, finally when I hover over readless it dims also and back to read more when clicked.

I guess in a nutshell with your example, how do I also toggle the class between readmore and readless?

Thanks!!

IC

5

Within the click function:

$(this).toggleClass('readMore readLess');
6

I figured this out, I don’t know much about JQuery or JS.

But I simply added the toggle class to the example like this:

Final Code:

$(document).ready(function() {
$('.readMore').each(function(i) {
	$(this).on('click', function() {
		$(this).toggleClass('readLess');
		$(this).next().toggle();
	});
});
});

Thanks again!

7

We may have posted at exactly the same time!

8

That way doesn’t toggle the readMore class name, it will just add/remove the readLess class name

9

Yes, I took your method and thank you so much! Can I mark this post as answered?