/    Sign up×
Community /Pin to ProfileBookmark

Hide Elements After Certain ID’s

Copy linkTweet thisAlerts:
Sep 08.2011

Hi all

I have a page which consists of mutiple DIV’s which each of them have an ID in the following naming convention:

box_1
box_2
box_3
box_4
box_5

and so on…

What I need help with is if a user clicks a box to remove it from the screen (e.g. they click box_2) I need box_3, box_4 and box_5 to be hidden as the process on screen is linear – i.e. the user should only be able to see the next box when they make a selection from the current box.

Is there any way I can hide these boxes if the box previous to them is removed?

I have seen something for jQuery gt() but I tried using it as below but nothing happened:

$(‘#box_’+tagid+’:gt(‘+tagid+’)’).hide();

Any thougths would be greatly appreciated.

kbc

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@DanInMASep 08.2011 — [CODE]$ <script type="text/javascript">
$(document).ready(function() {
$('[id*=box_]').click(function(){
$(this).nextAll().hide();
});
});

</script>[/CODE]

or[CODE] $('#box_'+tagid).nextAll().hide();[/CODE]
Copy linkTweet thisAlerts:
@KorSep 08.2011 — Don't use HTML comments [COLOR="Red"]<!-- -->[/COLOR][I] inside[/I] an embedded JavaScript code. It will spoil things if case of an XHTML or HTML5 Doctype.
Copy linkTweet thisAlerts:
@DanInMASep 08.2011 — woops thought i removed them both thanx
Copy linkTweet thisAlerts:
@007JulienSep 08.2011 — It's jQuery (and his 71ko) really necessary ?

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Untitled</title>
<style type="text/css">
.dsp {width:200px;}
</style>
</head>
<body>
<div id="box_1" class="dspn">box n°1</div>
<div id="box_2" class="dspn">box n°2</div>
<div id="box_3" class="dspn">box n°3</div>
<div id="box_4" class="dspn">box n°4</div>
<div id="box_5" class="dspn">box n°5</div>
<div id="box_6" class="dspn">box n°6</div>
<div id="box_7" class="dspn">box n°7</div>

<script type="text/javascript">
var elm;
for (var i=1;;i++)
if ((elm=document.getElementById('box_'+i)))
elm.onclick=function(){var j=parseInt(this.id.substr(4)),dbx;
while (dbx=document.getElementById('box_'+(++j))) dbx.style.display='none';}
else break;
</script>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@DanInMASep 08.2011 — well this is only a small part of what he is doing so I assumed it's all in jQ anyway.
×

Success!

Help @kbc1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...