We Keep Coding

jQuery toggle button is toggling all divs instead of the single desired one

I have several "newscard" divs and they all get toggled by the button. I need to toggle the "cardexpand" of only the "newscard" the button is inside of.
Ps. this is my 1st question on this website so please pardon any untoward stuff.
<script>
$(document).ready(function(){
$(".cardexpand").hide();
$(".expand").click(function(){
$(this).next(".cardexpand").toggle(1000);
});
});
</script>
<div class="newscard">
<img src="news1.jpg" class="img">
<div class="cardbody">
<p class="cardtitle">James Blyat does not associate with Vainglory players</p>
<p class="carddetails">Mar 29, 2019 • Gaming</p>
<button class="expand">Expand</button>
</div>
<div class="cardexpand">
<hr class="cardhr"></hr>
<p class="cardtext">
Vainglory is just anime of the gaming world and is
for weebs, he says. Vainglory is just anime of the gaming world and is
for weebs, he says.
</p>
</div>
</div>

The next() function is not going to work because the button is not a sibling of the container you want to toggle. You have to select the parent first. Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".cardexpand").hide();
$(".expand").click(function(){
$(this).parent().next(".cardexpand").toggle(1000);
});
});
</script>
<div class="newscard">
<img src="news1.jpg" class="img">
<div class="cardbody">
<p class="cardtitle">James Blyat does not associate with Vainglory
players</p>
<p class="carddetails">Mar 29, 2019 • Gaming</p>
<button class="expand">Expand</button>
</div>
<div class="cardexpand"><hr class="cardhr"></hr>
<p class="cardtext">Vainglory is just anime of the gaming world and is
for weebs, he says. Vainglory is just anime of the gaming world and is
for weebs, he says.
</p>
</div>
</div>
<div class="newscard">
<img src="news1.jpg" class="img">
<div class="cardbody">
<p class="cardtitle">James Blyat does not associate with Vainglory
players</p>
<p class="carddetails">Mar 29, 2019 • Gaming</p>
<button class="expand">Expand</button>
</div>
<div class="cardexpand"><hr class="cardhr"></hr>
<p class="cardtext">Vainglory is just anime of the gaming world and is
for weebs, he says. Vainglory is just anime of the gaming world and is
for weebs, he says.
</p>
</div>
</div>

You could use
$(this).closest(".newscard").find(".cardexpand").toggle(1000);
Here, closest() searches "up the DOM tree" until it finds a matching element. From there, we use find() to search inside the found element for elements matching .cardexpand.

My js pagination code is not working, completely lost as to what is causing it

I have a pagination set up that I have used many time before... works great for lists and simple paragraphs, but I am unable to get it to work with a more complex html code, which is listed below. For some reason, the js refuses to turn the below code into a set object in order to paginate.
<div class="properties-content">
<div id="paging_container8" class="container">
<div class="storybody">
<p>
<!---------- Property Start ---------->
<article class="hentry">
<div class="property-featured"> <a class="content-thumb" href="property-details.html"> <img src="images/property/property3.jpg" alt=""> </a> <span class="property-label last">Last one left</span> <span class="property-category">Single Family Home </span> </div>
<div class="property-wrap">
<h2 class="property-title"> Single Family Residential, NJ </h2>
<div class="property-excerpt">
<p>Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings...</p>
<p class="property-fullwidth-excerpt">Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings in good condition. Intimate backyard for private gatherings. Full basement...</p>
</div>
<div class="property-summary">
<div class="property-detail">
<div class="size"> <span>1118 sqft</span> </div>
<div class="bathrooms"> <span>2</span> </div>
<div class="bedrooms"> <span>3</span> </div>
</div>
<div class="property-info">
<div class="property-price"> <span> <span class="amount">$299,000</span> </span> </div>
<div class="property-action"> More Details </div>
</div>
<div class="property-info property-fullwidth-info">
<div class="property-price"> <span><span class="amount">$299,000</span> </span> </div>
<div class="size"><span>1118 sqft</span> </div>
<div class="bathrooms"><span>2</span> </div>
<div class="bedrooms"><span>3</span> </div>
</div>
</div>
</div>
<div class="property-action property-fullwidth-action"> More Details </div>
</article>
<!---------- Property End ---------->
<!---------- Property End ---------->
</p>
<div class="page_navigation"></div>
I need, due to how my css is, to show 2 of the above code snippet out of maybe 25. And here is my javascript that I am using:
<script>
var str= $(".storybody").html();
var substr=str.split( "<!--pagebreak-->" );
var txt="<ul class='storycontent'><li>";
var x=0;
for (x in substr)
{
if(x==0){
txt=txt+substr[x];
}
else{
txt=txt+"</li><li>"+substr[x];
}
}
var paginated=txt+"</li></ul>";
$('div.storybody').replaceWith(paginated);
$(document).ready(function(){
$('#paging_container8').pajinate({
num_page_links_to_display : 2,
items_per_page : 1 ,
item_container_id : '.storycontent'
});
});
​</script>
And here is the jsfiddle: http://jsfiddle.net/moLwmyyr/1/

I have figured it out!
The following js, along with the js in the fiddle, work with my html code in my question. Instead of the original js which only worked for simple lists, tables, and paragraphs, the js listed here will work on nested html code.
(function($){
$(document).ready(function(){
$(".pagination").customPaginate({
itemsToPaginate : ".post"
});
});
})(jQuery)
http://jsfiddle.net/moLwmyyr/2/
Works perfectly with my site and css. Hope this helps others.

How do I make a Sound reset after being played?

Basically if you hover over the anchor it plays the song and when you take it off it pauses it. I want it to pause and reset instead of just pause.
Heres my html
<a onmouseover="document.getElementById('mysound').play()" onmouseout="document.getElementById('mysound').pause()" style="display:block" href="MainPage.html">
<div id="box">
<audio id="mysound" src="C:/Programming/My Website/Audio/Stalker.mp3"></audio>
<p id="text"> Enter The Disco! </p>
</div>
</a>
also i would like to have the javascript in a seperate file.

This should work:
document.getElementById('mysound').currentTime = 0;
You can just add it right into your code:
<a onmouseover="document.getElementById('mysound').play()" onmouseout="document.getElementById('mysound').pause(); document.getElementById('mysound').currentTime = 0;" style="display:block" href="MainPage.html">
<div id="box">
<audio id="mysound" src="C:/Programming/My Website/Audio/Stalker.mp3"></audio>
<p id="text"> Enter The Disco! </p>
</div>
</a>

jquery cycle plugin showing last image when load/refresh

I get problem when using cycle plugin, I get last image when load
you can see the web link here - http://www.visitclearwaterflorida.com/index.php/
and this is what I see when first load/refresh - http://www.elixirbox.com/temp/header1.jpg
Is there anyone know what the problem ?
this is my code :
<div id="headerimgs">
<div class="headerimg bg1">
<div class="container_16">
<div class="grid_16"><div class="caption">Sunsets at Pier 60, Clearwater Beach</div></div>
</div>
</div>
<div class="headerimg bg2">
<div class="container_16">
<div class="grid_16"><div class="caption">'Winter' the Dolphin invites you to visit the Clearwater Marine Aquarium!</div></div>
</div>
</div>
<div class="headerimg bg3">
<div class="container_16">
<div class="grid_16"><div class="caption">Clearwater Beach </div></div>
</div>
</div>
<div class="headerimg bg4">
<div class="container_16">
<div class="grid_16"><div class="caption">Sunset at Pier 60, Clearwater Beach</div></div>
</div>
</div>
<div class="headerimg bg5">
<div class="container_16">
<div class="grid_16"><div class="caption">Clearwater Beach Walk</div></div>
</div>
</div>
</div>
I call image background from CSS class "bg1, bg2.. bg5"
Thanks

I suggest that you change your CSS to be something like this:
#headerimgs>div:first-child {display:block}
#headerimgs>div {display:none}
Or consequently if you are generating this with php you can have all of the imgs after the first with style="display:none"
Here is a link to the FAQ page describing the technique. http://jquery.malsup.com/cycle/faq.html

Please check the order of images you can gave for banner image... From your code i have found your expected image has been in 5th position.. please check and order it correctly. it will be work... or please put your code of banner.. i will guide you

I want the station name to be changed when user clicks play button

I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>

Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/

So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});​
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/