I'm trying to make some sense with jQuery, but since I never worked with javascript I'm having a bit of trouble.
Basically what am I trying to do.
I have this bit of code:
<div>
<a href="#"> Text 1 </a>
</div>
<div class="col-sm-5">
<span class="text show" style="display: none">sometext</span>
<img src="someimage.png">
</div>
and I would like to change it to the following:
<div>
<a href="#"> Text 1 CHANGED</a>
</div>
<div class="col-sm-5">
<span class="text show">sometext</span>
<img src="someimage.png" style="display: none>
</div>
after clicking on link with "text 1".
List of changes: Change link text switch image for text and the other way
Every time I click the link it is supposed to switch to the other variation, back and forward.
I have already tried some sollutions I found, mainly javascripts, but since I never worked with them I wasn't able to make it work.
There are many ways of doing what you want to do, but the most direct is probably something like this:
$('.text').click(function() {
$('.text.show').toggle();
$('.image').toggle();
$(this).text('Text 1 CHANGED');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href="#" class="text">Text 1</a>
</div>
<div class="col-sm-5">
<span class="text show" style="display: none">sometext</span>
<img class="image" src="https://lh3.googleusercontent.com/L8b2jHW8ttKu2spXcN6yUjocE_yIBG3E-bBot66cUOj_KsVCm6WcW5A-mxkKM4al6FI=w300-rw">
</div></div>