0

i'm having trouble getting the div show hide to work below. it work fine by itself on jfiddle but stops working when added on page. i'm using bootstrap with wordpress so not sure if it's conflicting some how. does anyone know what's going on here?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){
$('.targetDiv').hide();
$('.show1').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show1();
});

$('.hide').click(function () {
$('.targetDiv').hide();

});
});//]]>  
 </script>
<div class="buttons">
<a  class="show1" target="1">Option 1</a>
<a  class="show1" target="2">Option 2</a>
<a  class="show1" target="3">Option 3</a>
<a  class="show1" target="4">Option 4</a>

</div>

<div id="div1" class="targetDiv">Lorum Ipsuam 1</div>
<div id="div2" class="targetDiv">Lorum Ipssssums 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum dss3</div>
<div id="div4" class="targetDiv">Lorum Ipsussm 4</div>
acctman
  • 4,229
  • 30
  • 98
  • 142

1 Answers1

1

I think .load() has been deprecated in the jQuery version you're using. This might point you in the right direction

Also in my opinion you should include your javascript code at the bottom of the page. Sometimes that might not be possible when working with CMS's in which case you'll want to wrap your js in a document ready function like so: 

$(function(){
   //code here
});
Community
  • 1
  • 1
okcoker
  • 1,329
  • 9
  • 16