Help modify existing jquery script to allow for side by side div columns

I posted a question to experts and had a solution solved, (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_25408903.html) but wanted to see about modifying script. Currently it is contained in one ul and within each li of the ul there is a div with content that is hidden via jquery on page load. Rather than have a single list, I would like to have the list broken up into 2 sections. So rather than a single vertical list, would like 2 vertical lists side by side or can be 2 div's side by side with ul li div contained with each. The existing script from the previous question is fine and works, I just want to have the list broken up into 2 side by side lists.

Thank You
Any code or help provided is much appreciated...
PdesignzPPC SpecialistAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve KrileCommented:
The question you link to is very difficult to reproduce in a forum like this.  There are linked script tags that require a file with other files and .js file in those to work.  For issues like this, I find that creating a simple, stand-alone concept works best.  Seems to me, all you are really trying to achieve can be handled by Cascading Style Sheets.  

Also, I see that you accepted the "complicated" version of the jquery.  "bluehozt" was on to something for you.  Calling everything by DIV id (i.e. ("#executive_header") ) is kind of a bad idea - and I think with this question you are seeing why.  The more abstract you can make your jquery and how it works with your page, the more flexible design.

With that in mind, I would suggest doing what "blue" suggests (using classes rather than ID's to identify and bind your jquery objects/events) and then it's just a matter of styling.

My example might seem a bit off base, but really take the time to figure out what I've done.  Abstracting your jquery from your html as much as possible (by using parent() and :first-child selectors) is a little dangerous, but well worth it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>
	<script type="text/javascript"
		src="http://static.flowplayer.org/js/tools/1.1.2/all/jquery.tools.min.js?v=1"></script>
	<style>
		ul.menuList {width:200px;padding:2px;border:solid 1px gray;list-style-type:none;float:left;margin:10px;}
		ul.menuList > li {clear:both;}
		ul.menuList li > div.content {display:none;}
		a.close {float:right;}
	</style>
</head>




<body>

	<select name="toc" id="toc" onchange='dropDown(this)'>
	 <option selected="selected">Audit Content</option>
	 <option >Executive Content</option>
	 <option >Sales Content</option>
	 <option >Marketing Content</option>

	</select>

	<ul class="menuList">
		<li class="expander" rel="Audit Content">
			<a href="javascript:;" rel="Audit Content">Audit Content</a>
			<div class="content">
				<p>content relating to AUDIT...</p>
				<a href="#" class="close">close this</a>
			</div>
		</li>

		<li rel="Executive Content">
			<a href="javascript:;" rel="Executive Content">Executive Content</a>
			<div class="content">
				<p>content relating to EXECUTIVE...</p>
				<a href="#" class="close">close this</a>
			</div>
		</li>
	</ul>


	<ul class="menuList">
		<li rel="Sales Content">
			<a href="javascript:;" rel="Sales Content">Sales Content</a>
			<div class="content">
				<p>content relating to SALES...</p>
				<a href="#" class="close">close this</a>
			</div>
		</li>

		<li rel="Marketing Content">
			<a href="javascript:;" rel="Marketing Content">Marketing Content</a>
			<div class="content">
				<p>content relating to MARKETING...</p>
				<a href="javascript:;" class="close">close this</a>
			</div>
		</li>
	</ul>



	<script type="text/javascript">
	var last="";



	function dropDown(obj){

		//get the value of the drop down
		objRel = $(obj).val();

		//hide all the div.content objects
		 $("ul.menuList li > div.content").hide();

		 //fade in div under the matching LI
		 $("ul.menuList li[rel=" + objRel + "] > div.content").fadeIn();

	 }



	$(document).ready(function(){
		//set the default div to show
		dropDown($("#toc"))


		//bind a click event to the first child anchor tag of our menu list LIs
		$("ul.menuList > li > a:first-child").click(function(e){
			//good idea to stop unwanted navigation
			e.preventDefault();

			//when the "header" is clicked, change the display of the child DIV tag
			$(this).next("div.content").slideToggle();
		})

		//bind the close click event to all the "bottom" anchor tags
		$("a.close").click(function(e){
			//good idea to stop unwanted navigation
			e.preventDefault();

			//slide the parent of the close anchor up
			$(this).parent("div.content").slideUp();
		});


	});


	</script>

</body>



</html>

Open in new window

0
Steve KrileCommented:
And just as an aside, if your "headers" cause the panes to open and close, you really don't need the "close this" link.
0
PdesignzPPC SpecialistAuthor Commented:
Like what you did, but not exactly what I was looking for. What I need is the options to be listed in two colums/div's side by side as I have a mouseover image hover effect, clicking on link in column, will then hide the columns, except for the link that was clicked on, then will display content that related to link that was clicked in div under link as well as display select list, cycling through the select list will display hidden content of section that was selected from select list. Clicking on close will then hide the content and select list and return you the two column side by side display.

Thank You
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Steve KrileCommented:
hmmm...Interesting.  Give me a few and I'll try to get that working for you...but, I think I know what you are going for now.
0
PdesignzPPC SpecialistAuthor Commented:
Much Appreciated ! :)
0
Steve KrileCommented:
Not sure if this is it exactly, but I think we're getting close.
0
Steve KrileCommented:
Oops, clicked too fast.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

        <style>
        		a, a:hover, a:visited, a:active {text-decoration:none;}
                ul.menuList {width:200px;padding:2px;list-style-type:none;float:left;margin:10px;}
                ul.menuList > li {clear:both;}
                ul.menuList li {display:none;}
                ul.menuList li > div.content {display:none;}
                a.close {float:right;}
        </style>
</head>




<body>


        <ul class="menuList">
                <li rel="Audit Content">
                        <a href="javascript:;" rel="Audit Content">Audit Content</a>
                        <div class="content">
                                <p>content relating to AUDIT...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Executive Content">
                        <a href="javascript:;" rel="Executive Content">Executive Content</a>
                        <div class="content">
                                <p>content relating to EXECUTIVE...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>
        </ul>


        <ul class="menuList">
                <li rel="Sales Content">
                        <a href="javascript:;" rel="Sales Content">Sales Content</a>
                        <div class="content">
                                <p>content relating to SALES...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Marketing Content">
                        <a href="javascript:;" rel="Marketing Content">Marketing Content</a>
                        <div class="content">
                                <p>content relating to MARKETING...</p>
                                <a href="javascript:;" class="close">close this</a>
                        </div>
                </li>
        </ul>
		<div style="clear:both">&nbsp;</div>
        <select name="toc" id="toc" onchange='dropDown(this)'>
         <option selected="selected">Audit Content</option>
         <option >Executive Content</option>
         <option >Sales Content</option>
         <option >Marketing Content</option>

        </select>



        <script type="text/javascript">
        var last="";



        function dropDown(obj){

                //get the value of the drop down
                objRel = $(obj).val();

                //hide all the div.content objects
                 $("ul.menuList li").hide();

                 //fade in div under the matching LI
                $("ul.menuList li[rel='" + objRel + "']").fadeIn().children("div.content").fadeIn();

         }



        $(document).ready(function(){
                //set the default div to show
                dropDown($("#toc"))


                //bind a click event to the first child anchor tag of our menu list LIs
                $("ul.menuList > li > a:first-child").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //when the "header" is clicked, change the display of the child DIV tag
                        $("ul.menuList div.content").hide();
                        $("ul.menuList li").hide();
                        $(this).parent("li").fadeIn();
                        $(this).next("div.content").fadeIn();
                        $("#toc").fadeIn();
                })

                //
                $("ul.menuList > li").hover(function(){$(this).toggleClass("hover")});

                //bind the close click event to all the "bottom" anchor tags
                $("a.close").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //slide the parent of the close anchor up
                        $("ul.menuList div.content").hide();
                        $("#toc").hide();
                        $("ul.menuList li").fadeIn();
                });


        });



        </script>

</body>



</html>

Open in new window

0
PdesignzPPC SpecialistAuthor Commented:
Better, couple of modifications... can you move the select list to the top, select list and content should not be displayed on page load, also when click link in second column, it should hide first column as currently doing, but rather than display content off to the right in where second section would be, it should shift or left align content so looks like it would be where column 1 was
0
Steve KrileCommented:
This feels closer  :P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

        <style>
        		a, a:hover, a:visited, a:active {text-decoration:none;}
                ul.menuList {width:200px;padding:2px;list-style-type:none;float:left;margin:10px;}
                ul.menuList > li {clear:both;}
                ul.menuList li > div.content {display:none;}
                a.close {float:right;}
        </style>
</head>




<body>
        <select name="toc" id="toc" onchange='dropDown(this)' style="display:none;">
         <option selected="selected">Audit Content</option>
         <option >Executive Content</option>
         <option >Sales Content</option>
         <option >Marketing Content</option>

        </select>
        <div style="clear:both">&nbsp;</div>

        <ul class="menuList">
                <li rel="Audit Content">
                        <a href="javascript:;" rel="Audit Content">Audit Content</a>
                        <div class="content">
                                <p>content relating to AUDIT...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Executive Content">
                        <a href="javascript:;" rel="Executive Content">Executive Content</a>
                        <div class="content">
                                <p>content relating to EXECUTIVE...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>
        </ul>


        <ul class="menuList">
                <li rel="Sales Content">
                        <a href="javascript:;" rel="Sales Content">Sales Content</a>
                        <div class="content">
                                <p>content relating to SALES...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Marketing Content">
                        <a href="javascript:;" rel="Marketing Content">Marketing Content</a>
                        <div class="content">
                                <p>content relating to MARKETING...</p>
                                <a href="javascript:;" class="close">close this</a>
                        </div>
                </li>
        </ul>





        <script type="text/javascript">
        var last="";



        function dropDown(obj){

                //get the value of the drop down
                objRel = $(obj).val();

                //hide everything
                 $("ul.menuList div.content, ul.menuList li, ul.menuList").hide();

                 //fade in div, ul, and li
                var liObj = $("ul.menuList > li[rel='" + objRel + "']");

				$(liObj).parent("ul.menuList").show();
				$(liObj).show();
				$(liObj).children("div.content").fadeIn();


         }



        $(document).ready(function(){

                //bind a click event to the first child anchor tag of our menu list LIs
                $("ul.menuList > li > a:first-child").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //when the "header" is clicked, change the display of the child DIV tag

                        //hide everything
                        $("ul.menuList div.content, ul.menuList li, ul.menuList").hide();

                        //show the parent UL
                        $(this).parents("ul.menuList").show();

                        //fade in the li
                        $(this).parents("li").fadeIn();

                        //fade in the content div below the link
                        $(this).next("div.content").fadeIn();

                        //bring in the drop down
                        $("#toc").fadeIn();
                        $("#toc").val($(this).attr("rel"))
                })


                //bind the close click event to all the "bottom" anchor tags
                $("a.close").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //hide everything
                        $("ul.menuList, ul.menuList div.content").hide();
                        $("#toc").hide();

                        //show the base list again
                        $("ul.menuList, ul.menuList > li").fadeIn();
                });


        });



        </script>

</body>



</html>

Open in new window

0
PdesignzPPC SpecialistAuthor Commented:
Looks good in Firefox, but in IE everything but the select list is displayed on page load, we are behind a corporate firewall and most would be using IE 6, so need that to work as well, much appreciated.... thank You!!
0
Steve KrileCommented:
Just need to make two of your style rules IE6 friendly.


***WAS****
ul.menuList > li {clear:both;}
ul.menuList li > div.content {display:none;}



***GOOD FOR IE6*****
ul.menuList li {clear:both;}
ul.menuList li div.content {display:none;}



We're behind the WALL too with IE6 as the default...not cool!  :)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PdesignzPPC SpecialistAuthor Commented:
yes, agreed very not cool... on the switching of content via select list, can we add a slight delay resembling a fade out/fade in effect, maybe a delay of ("5000"), something like that.
Thanks
0
Steve KrileCommented:
Yep...but this is my last revision for ya.  Really try to get to know what's happening here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

        <style>
        		a, a:hover, a:visited, a:active {text-decoration:none;}
                ul.menuList {width:200px;padding:2px;list-style-type:none;float:left;margin:10px;}
                ul.menuList li {clear:both;}
                ul.menuList li div.content {display:none;border:solid 1px gray;}
                a.close {float:right;}
        </style>
</head>




<body>
        <select name="toc" id="toc" onchange='dropDown(this)' style="display:none;">
         <option selected="selected">Audit Content</option>
         <option >Executive Content</option>
         <option >Sales Content</option>
         <option >Marketing Content</option>

        </select>
        <div style="clear:both">&nbsp;</div>

        <ul class="menuList">
                <li rel="Audit Content">
                        <a href="javascript:;" rel="Audit Content">Audit Content</a>
                        <div class="content">
                                <p>content relating to AUDIT...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Executive Content">
                        <a href="javascript:;" rel="Executive Content">Executive Content</a>
                        <div class="content">
                                <p>content relating to EXECUTIVE...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>
        </ul>


        <ul class="menuList">
                <li rel="Sales Content">
                        <a href="javascript:;" rel="Sales Content">Sales Content</a>
                        <div class="content">
                                <p>content relating to SALES...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Marketing Content">
                        <a href="javascript:;" rel="Marketing Content">Marketing Content</a>
                        <div class="content">
                                <p>content relating to MARKETING...</p>
                                <a href="javascript:;" class="close">close this</a>
                        </div>
                </li>
        </ul>





        <script type="text/javascript">
		var onmenu ;

        function dropDown(obj){

                //get the value of the drop down
                objRel = $(obj).val();

                //hide everything
                	$(onmenu).fadeOut("slow",function(){
                		//hide everything
                 		$("ul.menuList div.content, ul.menuList li, ul.menuList").hide();
                		var liObj = $("ul.menuList > li[rel='" + objRel + "']");
                		onmenu = $(liObj).parent("ul.menuList");
						$(liObj).parent("ul.menuList").show();
						$(liObj).show();
						$(liObj).children("div.content").fadeIn();

                	});





         }



        $(document).ready(function(){

                //bind a click event to the first child anchor tag of our menu list LIs
                $("ul.menuList > li > a:first-child").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //when the "header" is clicked, change the display of the child DIV tag

                        //hide everything
                        $("ul.menuList div.content, ul.menuList li, ul.menuList").hide();

                        onmenu = $(this).parents("ul.menuList");

                        //show the parent UL
                        $(this).parents("ul.menuList").show();

                        //fade in the li
                        $(this).parents("li").fadeIn();

                        //fade in the content div below the link
                        $(this).next("div.content").fadeIn();

                        //bring in the drop down
                        $("#toc").fadeIn();
                        $("#toc").val($(this).attr("rel"))
                })


                //bind the close click event to all the "bottom" anchor tags
                $("a.close").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //hide everything
                        $("ul.menuList, ul.menuList div.content").hide();
                        $("#toc").hide();

                        //show the base list again
                        $("ul.menuList, ul.menuList > li").fadeIn();
                });


        });



        </script>

</body>



</html>

Open in new window

0
PdesignzPPC SpecialistAuthor Commented:
sorry, newbie to jquery :(
0
Steve KrileCommented:
No worries.  I'm not angry, just looks like you have a really good start here.
0
PdesignzPPC SpecialistAuthor Commented:
can the script be moved to the head or does it need to be in the body?
0
Steve KrileCommented:
Do you mean, can it be included in a .js file from the head?  yes.

Do you mean you want the actual script tag moved to the top of the page?  It is generally considered best-practice to keep your javascript at the bottom of your html.

http://developer.yahoo.com/performance/rules.html

However, in my experience with jquery, as long as you do everything within the context of

$(document).ready();

you shouldn't have to worry about WHERE you put the script.
0
PdesignzPPC SpecialistAuthor Commented:
hmm, always thought best in head tag, guess you l learned something new.... Thanks and if I have additional questions, I"ll go ahead and post another question
0
PdesignzPPC SpecialistAuthor Commented:
Great work! Thanks!!
0
Steve KrileCommented:
Fair enough.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.