Reputation: 1368
I have a bunch of these and when the user clicks Maximize the div expands to show the content. After the content toggles down, the link to minimize on the bottom is visible. When clicking that link it will toggle correctly, I am just looking for a way to change the text in the first link, as currently the jQuery only changes the text for the link clicked on. Is there a way to do this easily? Something using Parent()
and then Child()
to get back into the top table a
?
When toggling it should change both #bridge
to either be + Expand
or - Minimize
respectively.
javascript
<script type="text/JavaScript" language="javascript">
$(document).ready(function() {
$(".expand").click(function(e) {
e.preventDefault();
var toggle = $(this).attr('href');
var txt = $(this).text() == '+ Expand' ? '- Minimize' : '+ Expand';
$(this).text(txt);
$(toggle).slideToggle('fast', function() {
});
});
});
</script>
HTML
<!--Drop Down -->
<div>
<b class='bdrround'>
<b class='bdrround1'><b></b></b>
<b class='bdrround2'><b></b></b>
<b class='bdrround3'></b>
<b class='bdrround4'></b>
<b class='bdrround5'></b></b>
<div class='bdrroundfg'>
<table width='100%' class='pagehead'>
<tr>
<td width='80%' class='pagehead'>
<h2><a name='bureau'></a>Approved Bridging Statements (Optional):</h2>
</td>
<td width='20%' class='pagehead'>
<p align='right'><a href='#bridge' id="expand" class='expand'>+ Expand</a></p>
</td>
</tr>
</table>
<div id='bridge' class='faqcontainer' style='display:none;'>
<p>
<b>Operational Direction: </b>These should be used to bring the customer back into the conversation and
to transition into FAQs, Resolving Objections and overall general conversational flow.
These statements are designed to let the customer know that we are listening, that his/her opinion is
important and that we realize the value of that opinion.
</p>
<p>
<b>BRIDGING STATEMENTS:</b>
<ul>
<li>Now with that in mind …</li>
<li>That's an excellent question…</li>
<li>I hear what you are saying and…</li>
<li>I can (certainly) understand that and…</li>
<li>That's a very good point…</li>
<li>Please keep in mind…</li>
<li>I can understand your hesitation, but…</li>
<li>I can appreciate that…</li>
<li>Thank you </li>
<li>Perfect </li>
<li>Great </li>
<li>One moment please </li>
<li>Excellent</li>
<li>That’s great, now…</li>
<li>That’s correct</li>
<li>Let me clarify that for you</li>
</ul>
<span class="note">Note to Rep: </span>Use of Mr. or Ms. can be added throughout the call as appropriate
to help build rapport with the customer.
</p>
<p>
<span class="note">[Note to Rep: Ensure all service needs are satisfied before offering.]</span>
</p>
<p>
[<span class="note">Directional:</span> If during the servicing of the call the customer mentioned
they were retired, unemployed, or working less than 30 hours per week, go to:
<a href="#">PS Basic Counter Offer Transition</a>]
</p>
<p align='right'><a href="#bridge" id="A2" class='expand'>- Minimize</a></p>
</div>
<b class='bdrround'>
<b class='bdrround5'></b>
<b class='bdrround4'></b>
<b class='bdrround3'></b>
<b class='bdrround2'><b></b></b>
<b class='bdrround1'><b></b></b></b>
</div>
<div class='hrSectDiv'></div>
</div>
Upvotes: 2
Views: 273
Reputation: 206347
Don't use a #some-id
href to toggle your element but rather put in a reusable var
an all-button's common parent.
Add a class .slide_content
to all of your slideable elements (.faqcontainer
) (or just use .faqcontainer
instead of the mentioned, I was not sure if it's a general class)
Done that we have to find what parent element is common to: -both buttons and -one slideable content using .closest()
... Great! you have one! it's <div class='bdrroundfg'>
!!!
Let's use him in a var: var common_parent = $(this).closest('.bdrroundfg');
Now we just have to make jQ retrieve for that element - his children buttons and his slideable content:
var slide_content = common_parent.find('.slide_content'); // the added class!
var all_buttons = common_parent.find('a.expand'); // both buttons
On click we need is toggle the text of our first (.eq(0)
) button
var txt = $(this).text() === '+ Expand' ? '- Minimize' : '+ Expand';
all_buttons.eq(0).text(txt); // target only the first one in the collection
You code should look like THIS:
$(".expand").click(function(e) {
e.preventDefault();
var common_parent = $(this).closest('.bdrroundfg');
var slide_content = common_parent.find('.slide_content'); // the added class!
var all_buttons = common_parent.find('a.expand');
var txt = $(this).text() === '+ Expand' ? '- Minimize' : '+ Expand';
all_buttons.eq(0).text(txt); // toggle text - first button only!
$(slide_content).slideToggle('fast', function(){
// do something here...
});
});
Upvotes: 1