JSFiddle - React, Tailwind, and code Playground
HTML
<!-- the 421 and 444 classes are assumed to be your news item id's -->
<div id="accordion">
<h2 class="421">News header 1</h2>
<div>News text 1 News text 1 News text 1<br/>News text 1 News text 1 News text 1 News text 1</div>
<h2 class="444">News header 2</h2>
<div>News text 2 News text 2 News text 2<br/>News text 2 News text 2 News text 2 News text 2 </div>
</div>
CSS
/* Not needed, just added for a more clear example */
#accordion > h2 {border: 1px solid black;cursor:pointer;background:lightgray;}
#accordion > div {background: beige;border: 1px solid gray;}
#accordion {width:300px;}
JavaScript
$(function() {
//get news ID sent as URL parameter
var currentNewsId = getUrlVars()["id"];
//setup accordion
$("#accordion").accordion();
//select active accordion section
$("#accordion").accordion( "option", "active", $("."+currentNewsId) );
//helper function for getting url parameters easily
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
});