Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

show content from link chosen.

Posted on 2014-09-15
25
Medium Priority
?
115 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 83

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 83

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 83

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 83

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 83

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
 
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 83

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 83

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 83

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 83

Expert Comment

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

Open in new window

0
 
LVL 83

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 83

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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 …
Suggested Courses

876 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