I'm not sure if this question was answered before. I spend few hours looking for this, but with no luck.

Anyway, what I'm basically trying to do is to change a content of few spans, when another (let's call it main) span has class active. Imagine something like this:

```
<div class="arrow-left" id="prev"></div>
<span class="headline-p active" id="trail1">Trail 1</span>
<span class="headline-p" id="trail2">Trial 2</span>
<span class="headline-p" id="trail3">Trial 3</span>
<a class="arrow-right" id="next"></a>

<h3>Result <span id="result">1</span></h3>
<p>Test 1 = <span id="test1">1</span></p>
<p>Test 2 = <span id="test2">1</span></p>
<p>Test 3 = <span id="test3">1</span></p>
<h3>Gener result = <span id="g-result">10%</span></h3>

```

So, after clicking NEXT Trail 1 changes to Trail 2, and all values in spans (result, tests and g-result) change with it. When Trail 2 is active, Result 1 changes to Result 2, and Tests display different values.

My basic idea is to have class active changing on trails. But I'm not that good with jquery/js, so if someone has a better idea, I will gladly listen to it. 

One more thing, the code above is a simplified version of what I have. I would like to get just working demo to play with. 

Thanks in advance for the help! I would really appreciate any hints or fiddles. 

Sorry for any mistakes, It's my first post and I'm not English native.