Show/hide a div

JavaScript
1

I’m trying to create a simple link to show or hide some text. I have created a Codepen http://codepen.io/gandalf458/pen/avGqEG I did have the text showing but it’s not any more and I haven’t been able to change to text of the a link at all. Can anyone help please?

2 
function showhide() {
  if (show = 1) {
    hidetrx();
  } else {
    showtrx();
  }
}

You need to make it ==, not =, as your example has. = is an assignment operator. == is a comparison operator.

insert obligatory comment that you shouldn’t be doing onclick, as that’s 10 year old code, and poor practice.

3

Oops! Of course! :flushed:

So now my text shows and hides. What am I not doing to get the link text to change? I assume it’s because I have an anchor inside the trxshow paragraph, but how to address the anchor text.

Okay, so having flagellated myself with wet spaghetti, what should I be using?

4

Event listeners; Google for more helpful examples and documentation.

[quote=“gandalf458, post:3, topic:205897”]
I assume it’s because I have an anchor inside the trxshow paragraph, but how to address the anchor text.
[/quote]You assume correctly.

You could do something like this.

5

Cool. Thanks Ryan.

6

Just practising but how about something like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<p id="trxshow"><a href="#" id="showHide">Show transcript</a></p>
<div id="transcript">
		<p>Lorem ipsum dolor sit amet</p>
</div>
<script>

(function(){
var showHide = document.getElementById('showHide');
var el = document.getElementById('transcript');
el.style.display = "none";
	showHide.onclick = function() {
		el.style.display = (el.style.display == "none") ? "block":"none";
		showHide.innerHTML = (showHide.innerHTML == "Show transcript") ? "Hide transcript": "show transcript";		
	}
})();
</script>
</body>
</html>
1 Like
7

here is my humble suggestion:

    <html>
	<head>
		<title>toggle test</title>
		<style type="text/css" media="screen">
			.hide { display: none;}
			.aStylingClass { font-family: sans-serif; color:#555 }
		</style>
	</head>
	<body>
<p><a href="#" id="trxshow"  >Show transcript</a></p>
<div id="transcript" class="aStylingClass">
  <p>Lorem ipsum dolor sit amet</p>
</div>
	</body>
	<script type="text/javascript">
 		function toggleHide (target,theClassName, button){ 
	 		// button :  the button clicked, an object
	 		// target :  the inended element to hide/show( this element's class  will be toggled), a string
	 		// class  :  the class name to be toggled, a string
					target		= 	document.getElementById(target);
			var		targetClass = 	' '+target.className+' ';
			var 	        hiding 		=  	(targetClass.indexOf(theClassName) >-1) ;
			var		nClassName	= 	(!hiding) 	?  target.className+' '+theClassName+' ' : target.className.replace(' '+theClassName+' ', '') // toggles the class
			if ( typeof button  === 'object' ){// if an object has been provided,  udate inner text
				var 	oText 		=  	(!hiding) 	? 'Show ' : 'Hide '; // toggles button text
				var 	nText 		= 	(hiding) 	? 'Show ' : 'Hide '; // toggles button text
				button.innerHTML	=button.innerHTML.replace(oText, nText); // replaces the text in the togle button
			}
			target.className=nClassName; // updates the class  in the target element
 		}	 
 		
 		
 		document.getElementById('trxshow').onclick=function(){toggleHide('transcript','hide',this );}/// this attaches the action to the desired element, it can also be don vie inline javascript, but this is less obstrusive
 	</script>
</html>
1 Like
8

Many thanks Paul and Dresden. I’ll give those a go in the morning.

Cheers :slight_smile:

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.