Solved

show content from link chosen.

Posted on 2014-09-15
25
105 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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

759 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

18 Experts available now in Live!

Get 1:1 Help Now