Solved

show content from link chosen.

Posted on 2014-09-15
25
110 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
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

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

ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

825 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