Question

So I got it working just fine on the first page I tried it on:

http://www.uksf.net/platoon.php

but I cannot make it work on the front page:

http://www.uksf.net/index.php (the navigation bars on the side are supposed to have that little menu drop down (you can see on the inspector)).

The slide toggle doesn't work I have spent a few days trying to fix this so I haven't come on a whim, help appreciated thanks.

here is the html

<div class="sn1">
  <div class="sidelink">Enlistment</div>
      <div class="sn1group">
          <div class="sidelinksub">
               <div>&gt;&gt; Application</div>
               <div>&gt;&gt; Roles</div>
          </div>
      </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
      $(document).ready(function(){
          $(".sn1").click(function(){
          $(".sn1group").slideToggle("slow");
          });
      });
  </script>
  </div>
</div>

Here is the CSS

.sidelink{

width:auto;
height:auto;
color:white;
font-size:25px;
text-align:center;
padding: 8px 1px;
margin: 0px;
margin-top: 4px;
border-style:solid;
border-width:1px;
border-color:rgba(25,25,25,0.85);
background-size:234px 55px;
background-image:url('../img/mc2.png');
display:block;
overflow:auto;
}

.sidelinksub{
width:160px;
height:auto;
color:white;
font-size:10px;
text-align:left;
padding: 4px 1px;
margin-left: 38px;
margin-bottom:4px;
border-style:solid;
border-width:1px;
border-color:rgba(25,25,25,0.85);
background-color:rgba(48,48,48,0.75);
display:block;
overflow:auto;
}
Was it helpful?

Solution

You need to put your jQuery code inside another script tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $(".sn1").click(function(){
            $(".sn1group").slideToggle("slow");
        });
    });
</script>

OTHER TIPS

if you are using the jQuery library from the CDN, i would give the script tag the following attributes. it is required that you put type="text/javascript" for embedded scripting with javascript or js libraries like jQuery. also add the complete url in the src attribute, (and when using PHP you should add the dynamic link to the stylesheet you want to use):

<script src="http://code.jquery.com/jquery-1.10.1.min.js"  type="text/javascript">
   enter code here
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top