• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 117
  • Last Modified:

show content from link chosen.

I'm using a snippet of code to show/hide a content <div> on my webpage.

It is functioning as I want but I'd like to add another step where the content in the div that shows will change based on the link selected.

Here is the JS code.
<script type="text/javascript">
 
$(document).ready(function(){
 
        $(".slidingDiv").hide();
        $(".show_hide").show();
 
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
 
});
 
</script>

Open in new window



Here is the HTML:
<div id="head-campus"><div class="center"><ul> Choose a campus: <li><a href="#" class="show_hide">O'Fallon</a></li><li class="last"><a href="#" class="show_hide">Bethalto</a></li></ul> </div></div><!-- #head-campus -->
    <div class="slidingDiv">
    	<div class="center">
        
        <div id="ofallon">
        O'Fallon Campus
        </div><!-- ofallon campus -->
    	<a href="#" class="show_hide">Hide</a>
    	</div>
	</div><!-- slidingDiv -->

Open in new window


I would like to add 2 content divs inside the hidden area and based on the link the user selects, that div's content would display.

e.g.

O'Fallon link selected >> Div opens >> displays ofallon content
Bethalto link selected >> div open >> displays bethalto content
0
axessJosh
Asked:
axessJosh
  • 14
  • 11
1 Solution
 
leakim971PluritechnicianCommented:
using jQuery :

jQuery(function($) {
   $("#head-campus a.show_hide").click(function(event) { 
            event.preventDefault();
            var toOpen = $("#" + $(this).data("toopen")).show();  // ALL link have a new attribute saying which ID to open, for example for ofallon : <a data-toopen="ofallon" href="#"...
            $(".other").not(toOpen).hide(); // ALL divs to show or hide have the class "other", please add it : <div class="other"
   });
});

Open in new window

0
 
axessJoshAuthor Commented:
leakim.,

do I replace my code completely or just the click portion?
0
 
leakim971PluritechnicianCommented:
yes, remove your code, be sure to read the comment
create a very basic test page here if it doesn't work : http://jsfiddle.net
0
Ultimate Tool Kit for Technology Solution Provider

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 now.

 
axessJoshAuthor Commented:
I can get it to work without the class;

<div class="other">

works fine for Ofallon, but when click on Bethalto, it shows both divs.

perhaps thats the reasoning.
0
 
leakim971PluritechnicianCommented:
it shows both divs.
the goal of $(".other").not(toOpen).hide(); is to hide all other div...
0
 
axessJoshAuthor Commented:
I figured that.

But when I add the class other, it doesn't show the content of the div.  

I set it up like <div id="ofallon" class="other">Ofallon content </div>
0
 
axessJoshAuthor Commented:
Here is the code that I have.  The opening works, but it doesn't show any of the content.

do i need to add some CSS for size when it opens or something?  

$(document).ready(function(){
 
        $(".slidingDiv").hide();
        $(".show_hide").show();
 
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
 
});
 
 
 jQuery(function($) {
   $("#head-campus a.show_hide").click(function(event) { 
            event.preventDefault();
            var toOpen = $("#" + $(this).data("toopen")).show();  // ALL link have a new attribute saying which ID to open, for example for ofallon : <a data-toopen="ofallon" href="#"...
            $(".other").not(toOpen).hide(); // ALL divs to show or hide have the class "other", please add it : <div class="other"
   });
});

Open in new window


(i had to keep the slidingdiv rules to keep it functioning)

<div id="head-campus"><div class="center"><ul> Choose a campus: <li><a href="#" class="show_hide" data-toopen="ofallon">O'Fallon</a></li><li class="last"><a href="#" class="show_hide" data-toopen="bethalto">Bethalto</a></li></ul> </div></div><!-- #head-campus -->
    <div class="slidingDiv">
    	<div class="center">
        
        <div id="ofallon" class="other" >
        O'Fallon Campus
        </div><!-- ofallon campus -->
        <div id="bethalto" class="other">
        Bethalto Campus
        </div><!-- bethalto campus -->
    	<a href="#" class="show_hide">Hide</a>
    	</div>
	</div><!-- slidingDiv -->

Open in new window

0
 
axessJoshAuthor Commented:
UPDATE:

The code is functioning to open and close the <div>

However, it is not showing the appropriate content.
$(document).ready(function(){
 
        $(".slidingDiv").hide();
        $(".show_hide").show();
 
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
 
});
 
 
 jQuery(function($) {
   $("#head-campus a.show_hide").click(function(event) { 
            event.preventDefault();
            var toOpen = $("#" + $(this).data("toopen")).show();  // ALL link have a new attribute saying which ID to open, for example for ofallon : <a data-toopen="ofallon" href="#"...
            $(".other").not(toOpen).hide(); // ALL divs to show or hide have the class "other", please add it : <div class="other"
   });
});

Open in new window

<div id="head-campus"><div class="center"><ul> Choose a campus: <li><a href="#" class="show_hide" data-toopen="ofallon">O'Fallon</a></li><li class="last"><a href="#" class="show_hide" data-toopen="bethalto">Bethalto</a></li></ul> </div></div><!-- #head-campus -->
    <div class="slidingDiv">
    	<div class="center">
        
        <div id="ofallon" class="other" >
        O'Fallon Campus
        </div><!-- ofallon campus -->
        <div id="bethalto" class="other">
        Bethalto Campus
        </div><!-- bethalto campus -->
    	<a href="#" class="show_hide">Hide</a>
    	</div>
	</div><!-- slidingDiv -->

Open in new window

0
 
leakim971PluritechnicianCommented:
could put the code on the jsfiddle ?
0
 
axessJoshAuthor Commented:
Never used it before but here is the link.

http://jsfiddle.net/nx4d862z/

It's a wordpress theme so CSS is difficult to copy.
0
 
leakim971PluritechnicianCommented:
What miss here : http://jsfiddle.net/nx4d862z/1/

jQuery(function($) {
    $("#head-campus a.show_hide").click(function(event) {
        event.preventDefault();
        var toOpen = $("#" + $(this).data("toopen")).show();  
        $(".other").not(toOpen).hide();
        if(!$(".slidingDiv").is(":visible")) {
            $(".slidingDiv").slideDown("slow");
        }
    });
});

Open in new window

0
 
axessJoshAuthor Commented:
I replaced with cut and paste of your code and it is still not showing the content when the .slidingDiv opens.
0
 
axessJoshAuthor Commented:
When I use code inspector, it shows both <div> in question as Display:none as an element style.  It appears something in the code is not identifying the content to show.
0
 
leakim971PluritechnicianCommented:
the best would be to see your page.
I used your own HTML a bit of CSS and jQuery
0
 
axessJoshAuthor Commented:
Should I be using your code only?

when I remove the code I had for opening and closing, it doesn't work to hide the div on first entry.
0
 
leakim971PluritechnicianCommented:
yes and add CSS else it will not  hide the div on first entry
0
 
axessJoshAuthor Commented:
ok, what CSS should I add?

I tried display:none;

that keeps it off until click, but now it doesn't go away after click.
0
 
leakim971PluritechnicianCommented:
see on the jsfiddle, top, right
0
 
axessJoshAuthor Commented:
thanks for you continued help.

I refreshed teh jsfiddle and it's not there under CSS, can you provide your link.
0
 
leakim971PluritechnicianCommented:
.slidingDiv {
    display:none;
}

Open in new window

0
 
leakim971PluritechnicianCommented:
Here a new code : http://jsfiddle.net/nx4d862z/3/

jQuery(function($) {
    $("#head-campus a.show_hide").click(function(event) {
        event.preventDefault();
        var toOpen = $("#" + $(this).data("toopen"));  
        if($(".slidingDiv").is(":visible")&&toOpen.is(":visible")) {
            $(".slidingDiv").slideUp("slow");
        }
        else {
            toOpen.show();
            $(".other").not(toOpen).hide();
            $(".slidingDiv").slideDown("slow");
        }
    });
});

Open in new window

0
 
axessJoshAuthor Commented:
sorry for the trouble,

I must have something else in the code that's creating a conflict.

I replaced with your code.

now when it opens, it just hangs and doesn't re-close and still does not show the content.

if i have another <div class="center"> before <div id="ofallon" class="other"> would that cause a problem?
0
 
leakim971PluritechnicianCommented:
I dunno, maybe... Maybe not.
Provide a link to see your page in live
0
 
axessJoshAuthor Commented:
I couldn't get this code to work.

Here is how I updated and got it to function.

$(document).ready(function(){
 
        $(".slidingDiv").hide();
        $(".show_hide").show();
 
    		$("#ofallon").click(function(){ 
				$("#ofallon-info").show();
				$("#bethalto-info").hide();
			});
			
			$("#bethalto").click(function(){ 
				$("#bethalto-info").show();
				$("#ofallon-info").hide();
			});
	
		$('.show_hide').click(function(){
    	$(".slidingDiv").slideToggle();

 	});
});

Open in new window

0
 
axessJoshAuthor Commented:
I was unable to get the code offered previously to work in my instance.  When tested in JSFiddle, the code worked but something must have been creating conflict on my site.  The code I replaced is working.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

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 now.

  • 14
  • 11
Tackle projects and never again get stuck behind a technical roadblock.
Join Now