Develop Reference

jQuery - insertAfter not functioning

I'm trying to move the #whatsOnLink to below the "Get a Quote" button across the site using jQuery and I'm having trouble on the jQuery side of things. If I remove the additional part of .button from the target then it will move fine but I need it to go inside the holding div.
$('div[class^="grid"] a#whatsOnLink').each(
function() {
$(this).insertAfter($(this).closest('div[class^="grid_3"] div .button'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
Any help is appreciated.
Regards,
Kieran

Use this
$(this).closest('div[class^="grid_3"]').find('div .button')
Instead of
$(this).closest('div[class^="grid_3"] div .button')
$(document).ready(function() {
$('div[class^="grid"] a#whatsOnLink').each(
function() {
$(this).insertAfter($(this).closest('div[class^="grid_3"]').find('div .button'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>

You could use .next()
$('div[class^="grid"] a#whatsOnLink').each(function() {
$(this).insertAfter($(this).next().next());
// OR
// $(this).appendTo($(this).parent());
});
$('div[class^="grid"] a#whatsOnLink').each(function() {
$(this).insertAfter($(this).next().next());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>

next("some class") doesn't work

HTML
<div class="linksrtitle">Lorem ipsum</div>
<div class="linksrspace"></div>
<div class="linksrwrap"> // this div should be slided
<a class="linkr" href="volim-da-stoje.php">Lorem ipsum</a>
<a class="linkr" href="ova-salate-je-umrla.php">Lorem ipsum</a>
<a class="linkr" href="nova-rasa.php">Lorem ipsum</a>
</div>
<div class="linksrspace"></div>
JS
$(".linksrtitle").click(function(){
$(this).next(".linksrwrap").slideToggle(); // doesn't work
});
Why this click event doesn't work. Console is empty.

Use nextAll()(with first(), if multiple sibling with same class are there) to get that. next() only select immediate following sibling.
$(".linksrtitle").click(function() {
$(this).nextAll(".linksrwrap").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="linksrtitle">Lorem ipsum</div>
<div class="linksrspace"></div>
<div class="linksrwrap">// this div should be slided
<a class="linkr" href="volim-da-stoje.php">Lorem ipsum</a>
<a class="linkr" href="ova-salate-je-umrla.php">Lorem ipsum</a>
<a class="linkr" href="nova-rasa.php">Lorem ipsum</a>
</div>
<div class="linksrspace"></div>

javascript function show / hide multiple divs with first div visible

Im trying to make the first target div always be visible when the page loads whilst the others become visible as the user selects the option. Currently they are all hidden as the page is loaded and only become visible once the buttons are clicked.
JS
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
HTML
<div class="buttons">
<a class="show" target="1">Option 1</a>
<a class="show" target="2">Option 2</a>
<a class="show" target="3">Option 3</a>
<a class="show" target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>

You can use $('.targetDiv:not(#div1)').hide() DEMO
$('.targetDiv:not(#div1)').hide();
$('.show').click(function() {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});

use :gt(0):-
:gt() Select all elements at an index greater than index within the matched set.
$('.targetDiv:gt(0)').hide();
Note:
target
This attribute specifies where to display the linked resource. (_self,
_blank, _parent, _top)
Use this attribute only if the href attribute is present.
Therefore I would recommend using data:-
<a class="show" data-target="1">Option 1</a>
and get the value using:-
$(this).data('target')

Call .show() on the first div after hiding the others:
$('.targetDiv').hide();
$('#div1').show();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});

Try this code
$(".targetDiv").not(':first').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});

Another way you can simply hide div by css in HTML JSFiddle
HTML
<div class="buttons">
<a class="show" target="1">Option 1</a>
<a class="show" target="2">Option 2</a>
<a class="show" target="3">Option 3</a>
<a class="show" target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum 4</div>
Javascript
//$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});

Show hide div with active state

How can i amend this code please so that the buttons change on the active. It's getting soemwhere with toggleClass but the button that was formerly active remains active.
<script type="text/javascript">
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').hide();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).toggleClass( "greenactive"
).attr('target')).show();
});
});
</script>
my button code
<ul class="choose">
<li><a class="showSingle" target="1">Email Order</a></li>
<li><a class="showSingle" target="2">Order and Pay Now</a></li>
</ul>
the divs
<div id="div1" class="targetDiv" style="display:none">
content
</div>
<div id="div2" class="targetDiv" style="display:none">
content
</div>
style
a.greenactive {background:green}

use removeClass() before addclass()
$('.showSingle').click(function () {
$('.targetDiv').hide();
$('.showSingle').removeClass('greenactive');
$(this).addClass("greenactive")
$('#div' + $(this).attr('target')).show();
});
a.greenactive {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="choose">
<li>
<a class="showSingle" target="1">Email Order</a>
</li>
<li>
<a class="showSingle" target="2">Order and Pay Now</a>
</li>
</ul>
<div id="div1" class="targetDiv" style="display:none">content1</div>
<div id="div2" class="targetDiv" style="display:none">content2</div>

You just need to call removeClass() on all the .showSingle elements before toggling the class on the one which raised the event:
$('.showSingle').removeClass('greenactive');
Working example

Show 2 Divs withs same ID and Class onClick

Is there a way to show 2 Divs with the same id and class onClick with Jquery, cant solve this. (Div1/Class targetDiv)
Html:
<div class="buttons">
<a class="showSingle" data-target="1">Option 1</a> //With this
<a class="showSingle" data-target="2">Option 2</a>
<a class="showSingle" data-target="3">Option 3</a>
<a class="showSingle" data-target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div> //Show this
<div id="div1" class="targetDiv">Lorum Ipsum 1 Second</div> //And this
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>
Jquery:
$('.showSingle').on('click', function () {
$(this).addClass('selected').siblings().removeClass('selected');
$('.targetDiv').hide();
$('#div' + $(this).data('target')).show();
});
$('.showSingle').first().click();
Fiddle:
https://jsfiddle.net/XwN2L/5709/
Thank you so much for your Help!

It is not possible to have more than one occurrence of an ID on one page.
ID = Identifier
If you want to have the ability of "binding" the visibility of elements on you page, you could use data attributes with the same value.
For example:
<div class="links">
Group 1
Group 2
Group 3
</div>
<div class="some-class" data-id="group-1"></div>
<div class="some-class" data-id="group-1"></div>
<div class="some-class" data-id="group-2"></div>
<div class="some-class" data-id="group-3"></div>
<div class="some-class" data-id="group-2"></div>
Then:
var $links = $( '.links' ).find( 'a' );
$links.on( 'click', function ( e ) {
e.preventDefault();
var group = $( this ).attr( 'href' ).replace( '#', '' );
$( '.some-class' ).hide();
$( '.some-class[data-id="' + group + '"]' ).show();
});