How do I hide an element by clicking on another element?

Page 1 of 1

10 Replies - 1060 Views - Last Post: 09 July 2011 - 09:05 PM

#1 oneal.michaels  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 116
  • Joined: 25-June 10

How do I hide an element by clicking on another element?

Posted 08 July 2011 - 07:43 PM 

<div class='spoilerTitle'>
     title [show]
</div>
<div class='spoiler'>
     Spoiler
</div>


I want the second element to show/hide when the first element is clicked on, what would the easiest way to do this with javascript

This post has been edited by oneal.michaels: 08 July 2011 - 07:48 PM

Is This A Good Question/Topic? 0
  • +

Replies To: How do I hide an element by clicking on another element?

#2 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 112
  • View blog
  • Posts: 454
  • Joined: 27-June 10

Re: How do I hide an element by clicking on another element?

Posted 08 July 2011 - 07:56 PM

You would need to use the onclick event handler.

When it's clicked, change the style.visibility of the div via CSS. Hope this helps :)


<script type="text/javascript">
//Javascript HERE
</script>
<div class='spoilerTitle' onclick="javascript:hideSecond();">
     title [show]
</div>
<div class='spoiler'>
     Spoiler
</div>

This post has been edited by maniacalsounds: 08 July 2011 - 07:57 PM

Was This Post Helpful? 0
  • +
  • -

#3 oneal.michaels  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 116
  • Joined: 25-June 10

Re: How do I hide an element by clicking on another element?

Posted 08 July 2011 - 08:47 PM

yesss thats what I was aiming to do, but through javascript how would i apply javascript to the next element without naming them
Was This Post Helpful? 0
  • +
  • -

#4 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 112
  • View blog
  • Posts: 454
  • Joined: 27-June 10

Re: How do I hide an element by clicking on another element?

Posted 08 July 2011 - 08:56 PM

Uhhm.. you could get them by tag name?

var div = document.getElementByTagName("div")[1];

Was This Post Helpful? 0
  • +
  • -

#5 oneal.michaels  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 116
  • Joined: 25-June 10

Re: How do I hide an element by clicking on another element?

Posted 08 July 2011 - 08:59 PM

sooo how does this sound, i went ahead and named them by using the php function uniqid(), so that i could access them by their id, because the divs are dynamically generated
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: How do I hide an element by clicking on another element?

Posted 09 July 2011 - 01:31 AM

you could also go relative.
function toggle()
{
    var elem = this.nextElementSibling;
    if ("none" == elem.style.display) {
        elem.style.display = "";
    }
    else {
        elem.style.display = "none";
    }
}
var st = document.getElementsByClassName("spoilerTitle");
[].forEach.call(st, function(item) {
    item.addEventListener("click", toggle, false);
});

Was This Post Helpful? 2
  • +
  • -

#7 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 112
  • View blog
  • Posts: 454
  • Joined: 27-June 10

Re: How do I hide an element by clicking on another element?

Posted 09 July 2011 - 05:08 AM

Quote

sooo how does this sound, i went ahead and named them by using the php function uniqid(), so that i could access them by their id, because the divs are dynamically generated


Sure, you can do that if you wish. Just have PHP input the div's ID into the Javascript function too. :)
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: How do I hide an element by clicking on another element?

Posted 09 July 2011 - 05:24 AM

the only problem with that is that you have to mix server-side and client-side code, which sooner or later leads to problems. you wouldn’t even be able to use external Javascript files.
Was This Post Helpful? 0
  • +
  • -

#9 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 112
  • View blog
  • Posts: 454
  • Joined: 27-June 10

Re: How do I hide an element by clicking on another element?

Posted 09 July 2011 - 05:53 AM

@Dormilich, I understand what you mean. But surely imputting one line of PHP into Javascript won't ruin anything.

document.getElementById("<?php echo $divid ?>").style.visibility = "hidden";

Was This Post Helpful? 0
  • +
  • -

#10 baavgai  Icon User is online

  • Dreaming Coder
  • member icon

Reputation: 4890
  • View blog
  • Posts: 11,286
  • Joined: 16-October 07

Re: How do I hide an element by clicking on another element?

Posted 09 July 2011 - 10:18 AM

But, why impose a server side requirements on a page that doesn't need it? If your page must have Javascript to function anyway, maybe you can lessen the load on your server?

e.g.
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
	function addToggle(className) {
		var eleList = document.getElementsByClassName(className);
		[].forEach.call(eleList, function(ele) {
			var eleSib = ele.nextElementSibling;
			eleSib.style.display = "none";
			ele.addEventListener("click", function() {
				eleSib.style.display = ("none" == eleSib.style.display) ?  "" : "none";
			}
			, false);
		});
	}
	window.onload = function(){ addToggle("spoilerTitle"); }
</script>

</head>
<body>
	<h1>Test Page</h1>
	<div class="spoiler">
		<div class="spoilerTitle">Is PHP a nice server side language?</div>
		<div class="spoilerText">Yes</div>
	</div>
	<div class="spoiler">
		<div class="spoilerTitle">
			Do you need PHP when Javascript can handle all the dynamic elements already?
		</div>
		<div class="spoilerText">No</div>
	</div>
</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#11 Brewer  Icon User is offline

  • Awesome
  • member icon

Reputation: 175
  • View blog
  • Posts: 1,044
  • Joined: 14-June 10

Re: How do I hide an element by clicking on another element?

Posted 09 July 2011 - 09:05 PM

The easiest way by far is to use the jQuery .toggle() function. If the div you call .toggle() on is visible, then it will become hidden. This works both ways, if the div is hidden it will become visible. Try this out:

<div>
    <a href="#" id="spoilerTitle">show [title]</a>
</div>

<div class="spoiler">
    Spoiler
</div>




$document.ready(function() {

    $(".spoilerTitle").click(function() {
        $("#spoiler").toggle();
    });

});


That should do what you want. Just remember that you have to import jQuery before you try to use this.

This post has been edited by Brewer: 09 July 2011 - 09:15 PM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1