Link to home
Start Free TrialLog in
Avatar of Pdesignz
PdesignzFlag for United States of America

asked on

Help combining 2 jquery script files amd make them work together

Hello, I have two stand alone jquery files/scripts that work independently, but when I try and put them together that is where I am having the issue and not getting it to work. I am a newbie to jquery and javascript, have also tried playing with it, but still can't seem to get it to work together. What I have is a ul and the li have id's of header each different, but ending with _header. Then after the _header, there is a div _content within each li. On page load I am displaying just the li _header and hiding all the _content div's. Then when click on the link or _header of that section it will then display the content div of that section, clicking on another header will display the content div of that section and hide the previous content div as well as the content headers. So pretty much a show/hide depending on what link you click on. What I am trying to accomplish now is this. When the click a link I still want to display the content div, but also display a dropdown and depending on selection made in dropdown will than change the content div to the appropriate content div of the selection made in the drop down. The dropdown function works (Thank You Hielo!) in a separate file, but when I put them together the original div will display, but then when I make a selection from the drop down, the content will change, but then nothing will be displayed. I think that it has something to do with the original script using the show/hide that I did, but as am newbie, not sure how to fix or what I would need to make it work. Also if at all possible, would like that after making the selection in the dropdown and the content changes, would like if in the dropdown that it would display the content selected rather than the default name everytime as that will not be dispalyed every time, if not, no bib deal.

Thanks

Am attaching scripts and origianl and modified html code that have been playing with


Any help is much appreciated
<!-- Original Script -->
 <script type="text/javascript">
 $(document).ready(function(){
	$("#audit_content, #compensation_content, #corporate_content, #executive_content, #environmental_content, #select").hide();
	$("#audit_header").click(function () {
	$("#audit_content, #select").show();
	$("#compensation_content, #corporate_content, #executive_content, #environmental_content, #compensation_header, #corporate_header, #executive_header, #environmental_header").hide();
  });
  $("#compensation_header").click(function () {
	$("#compensation_content, #select").show();
	$("#audit_content, #corporate_content, #executive_content, #environmental_content, #audit_header, #corporate_header, #executive_header, #environmental_header").hide();
  });
  $("#corporate_header").click(function () {
	$("#corporate_content, #select").show();
	$("#audit_content, #compensation_content, #executive_content, #environmental_content, #audit_header, #compensation_header, #executive_header, #environmental_header").hide();
  });
  $("#executive_header").click(function () {
	$("#executive_content, #select").show();
	$("#audit_content, #compensation_content, #corporate_content, #environmental_content, #audit_header, #compensation_header, #corporate_header, #environmental_header").hide();
  });
  $("#environmental_header").click(function () {
	$("#environmental_content, #select").show();
	$("#audit_content, #compensation_content, #corporate_content, #executive_content, #audit_header, #compensation_header, #corporate_header, #executive_header").hide();
   });
  $(".return").click(function () {
	$("#audit_header, #compensation_header, #corporate_header, #executive_header, #environmental_header").show();
	$("#audit_content, #compensation_content, #corporate_content, #executive_content, #environmental_content, #select").hide();
  });
  });
 </script>
<!-- New script trying to add -->

<script type="text/javascript">
                var last="";
                $(function(){
                        $(".container").hide();
                        showDiv();
                });
                
                function showDiv(){
                        var value = $("#toc option:selected").val();
                        if( 0<$(".selectedDiv").size())
                        {
                                $(".selectedDiv").fadeOut("slow",function(){
                                        $(".selectedDiv").removeClass("selectedDiv");
                                        $("#"+value).addClass("selectedDiv").fadeIn("5000");
                                });
                        }
                        else
                        {
                                $("#"+value).addClass("selectedDiv").fadeIn("5000");
                        }
                }
                </script>

Open in new window

original.txt
modified.txt
ASKER CERTIFIED SOLUTION
Avatar of theremon
theremon
Flag of Greece image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Oops - I forgot to mention I changed the path to jquery - don't forget to update line 7 to the following:

Line 7 above should be:
<script type="text/javascript" src="../jquery/js/jquery-1.3.2.min.js"></script>

Open in new window

I think you need to simplify everything - the second script goes someway to doing this.

I recommend you have only 1 script that closes all content divs and opens the selected one. You would pass the value of the selected div into that function. So the showDiv() function in the second script just needs a little abstraction to provide you with a neat solution for the clicks and the dropdown. You add the same class value to each li e.g. expander - *include the content div, (no need to name it as it is the only content div within the named li) and other html within the li tags for neatness and simpler DOM selection using jquery* - see my code with just 2 li's for clarity.
<script type="text/javascript">
var last="";
function dropDown(){
                        
     showDiv($("#toc option:selected").val());

 });

$('li.expander').click = function(){

   showDiv($(this));

}

$('a.close').click = function(){
 $("li.expander > div").hide();
}
                
function showDiv(el){

   /*this hides all divs inside the expander lis*/
   $("li.expander > div").hide();
                                                                     
   /*this shows the div within the clicked li or selected li from     dropdown*/
   $(el + ' > div').fadeIn("5000");
                        
  }

</script>

//HTML

<ul>

<li class="expander" id="executive-header">

  <div>

    <p>content relating to executive...</p>

    <a href="#executive-header" class="close">close this</a>

 </div>

</li>

<li class="expander" id="audit-header">

  <div>

    <p>content relating to audit...</p>

    <a href="#audit-header">close this</a>

 </div>

</li>

</ul>

<select name="toc" id="toc" onchange='dropDown()'>
 <option value='audit-header' selected="selected">Audit Content</option>
 <option value='executive-header'>Executive Content</option>              
               
</select>

Open in new window

Avatar of Pdesignz

ASKER

Great work! Much appreciated, thank you!!
And just as an aside, if your "headers" cause the panes to open and close, you really don't need the "close this" link.