/    Sign up×
Community /Pin to ProfileBookmark

jQuery show/hide link div

Copy linkTweet thisAlerts:
Apr 13.2009

I have multiple divs called article which have a show/hide link to
toggle a div inside called articleBody. Problem is when I click the
link all divs show/hide.

The html structure is below:

<div class=”article”>
<p class=”show”><a href=”#”>Hide [-]</a></p>
<div class=”articleBody”><!– Stuff i need to hide on click</div>
</div>

Any idea how I can toggle the text to say show/hide as well as just
closing that one instance of div article rather than every instance on
the page?

Thanks

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@infinityspiralApr 13.2009 — Sounds like you might need to need to make your selectors more specific. Maybe this > child would work for you to not have all the divs selected.

I was able to get success by targeting the link clicked on like this:
[CODE] $(function (){
$('.article a').click(function(){
if($(this).text()=='Hide [-]'){
$(this).text('Show [+]');
$(this).parent().next().hide();
} else {
$(this).text('Hide [-]');
$(this).parent().next().show();
}
return false;
});
});[/CODE][CODE]
 <div class="article">
<p class="show"><a href="#">Hide [-]</a></p>
<div class="articleBody">test</div>
</div>
<div class="article">
<p class="show"><a href="#">Hide [-]</a></p>
<div class="articleBody">test</div>
</div>
<div class="article">
<p class="show"><a href="#">Hide [-]</a></p>
<div class="articleBody">test</div>
</div>
<div class="article">
<p class="show"><a href="#">Hide [-]</a></p>
<div class="articleBody">test</div>
</div>
<div class="article">
<p class="show"><a href="#">Hide [-]</a></p>
<div class="articleBody">test</div>
</div>
<div class="article">
<p class="show"><a href="#">Hide [-]</a></p>
<div class="articleBody">test</div>
</div> [/CODE]
Copy linkTweet thisAlerts:
@DisfunctionalauthorApr 13.2009 — Thanks for the help ?

The example for some reason was on click just hiding the h2 element. I modified it to this:


$('.article p.show a').click(function(){

if($(this).text()=='Hide [-]'){

$(this).text('Show [+]');

$(this).parent().next().next().next().hide();

} else {

$(this).text('Hide [-]');

$(this).parent().next().next().next().show();

}

return false;

});[/QUOTE]

Not very elegant, but seems to work. Anyone know a way of making this a lot neater?

Thanks again
Copy linkTweet thisAlerts:
@Jeff_MottApr 13.2009 — You could simplify it by adding a "Show [+]" link in the markup.

&lt;div class="article"&gt;
&lt;p class="show"&gt;&lt;a href="#"&gt;Show [+]&lt;/a&gt;&lt;/p&gt;
&lt;p class="hide"&gt;&lt;a href="#"&gt;Hide [-]&lt;/a&gt;&lt;/p&gt;
&lt;div class="articleBody"&gt;
&lt;p&gt;Hello, World!&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;

$(document).ready(function(){

<i> </i>$("div.article").each(function(){

<i> </i> var thisArticle = this;

<i> </i> // Initially, hide the "Show" link
<i> </i> $("p.show", thisArticle).hide();

<i> </i> // The show and hide links both toggle themselves and the article body
<i> </i> $("p.show a, p.hide a", thisArticle).click(function(){
<i> </i> $("p.show, p.hide, div.articleBody", thisArticle).toggle();
<i> </i> return false;
<i> </i> });

<i> </i>});

});

&lt;/script&gt;
Copy linkTweet thisAlerts:
@hanamantOct 04.2011 — In this Example :


<div class="article">

<p class="show"><a href="#">Show [+]</a></p>

<p class="hide"><a href="#">Hide [-]</a></p>

<div class="articleBody">

<p>Hello, World!</p>

</div>

</div>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("div.article").each(function(){

var thisArticle = this;

// Initially, hide the "Show" link
$("p.show", thisArticle).hide();

// The show and hide links both toggle themselves and the article body
$("p.show a, p.hide a", thisArticle).click(function(){
$("p.show, p.hide, div.articleBody", thisArticle).toggle();
return false;
});

});

});

</script>
×

Success!

Help @Disfunctional 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 4.24,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...