jQuery - using .slideToggle to toggle ONLY ONE thing at a time

jQuery - using .slideToggle to toggle ONLY ONE thing at a time

All I want is for each list to toggle in and out when you click the span
that precedes it. What happens now is that clicking one span toggles all
the lists. I'm a jQuery beginner, but I feel like this is a really simple
thing to do, so I'm frustrated that I can't figure it out. Also, there
will be a LOT of these on the page, so I don't want to have to add a bunch
of code for each new list.
This is my HTML:
<span class="rental">123 Main Street</span>
<ul class="rental-det">
<li>2 bedrooms</li>
<li>1 bathroom</li>
<li>New carpets throughout</li>
<li>All large kitchen appliances included</li>
<li>In-unit washer and dryer</li>
<li>Central air</li>
<li>Dishwasher</li>
<li>Renter responsible for all utilities</li>
</ul>
<span class="rental">321 Main Street</span>
<ul class="rental-det">
<li>2 bedrooms</li>
<li>1 bathroom</li>
<li>New carpets throughout</li>
<li>All large kitchen appliances included</li>
<li>In-unit washer and dryer</li>
<li>Central air</li>
<li>Dishwasher</li>
<li>Renter responsible for all utilities</li>
</ul>
So, again, I want to be able to click each span with a class of "rental"
and toggle the list that immediately follows it.
Here is the jQuery I have been using:
$(document).ready(function(){
$('.rental').click(function() {
$('.rental-det').slideToggle()
});
});
I have also added display: none; to the .rental-det class to make them
hidden by default.