Solved

show content from link chosen.

Posted on 2014-09-15
25
109 Views
Last Modified: 2014-09-24
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
Comment
Question by:axessJosh
  • 14
  • 11
25 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40323938
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
 
LVL 2

Author Comment

by:axessJosh
ID: 40323945
leakim.,

do I replace my code completely or just the click portion?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40323948
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
 
LVL 2

Author Comment

by:axessJosh
ID: 40323954
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40323973
it shows both divs.
the goal of $(".other").not(toOpen).hide(); is to hide all other div...
0
 
LVL 2

Author Comment

by:axessJosh
ID: 40324048
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
 
LVL 2

Author Comment

by:axessJosh
ID: 40325559
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
 
LVL 2

Author Comment

by:axessJosh
ID: 40325589
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40325628
could put the code on the jsfiddle ?
0
 
LVL 2

Author Comment

by:axessJosh
ID: 40325731
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40325764
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
 
LVL 2

Author Comment

by:axessJosh
ID: 40325780
I replaced with cut and paste of your code and it is still not showing the content when the .slidingDiv opens.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Author Comment

by:axessJosh
ID: 40325788
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40325818
the best would be to see your page.
I used your own HTML a bit of CSS and jQuery
0
 
LVL 2

Author Comment

by:axessJosh
ID: 40325825
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40325834
yes and add CSS else it will not  hide the div on first entry
0
 
LVL 2

Author Comment

by:axessJosh
ID: 40325849
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40325880
see on the jsfiddle, top, right
0
 
LVL 2

Author Comment

by:axessJosh
ID: 40325884
thanks for you continued help.

I refreshed teh jsfiddle and it's not there under CSS, can you provide your link.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40325888
.slidingDiv {
    display:none;
}

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 40325896
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
 
LVL 2

Author Comment

by:axessJosh
ID: 40325902
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40326031
I dunno, maybe... Maybe not.
Provide a link to see your page in live
0
 
LVL 2

Accepted Solution

by:
axessJosh earned 0 total points
ID: 40333249
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
 
LVL 2

Author Closing Comment

by:axessJosh
ID: 40341140
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now