Question

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 &hellip;</li>
                        <li>That's an excellent question&hellip;</li>
                        <li>I hear what you are saying and&hellip;</li>
                        <li>I can (certainly) understand that and&hellip;</li>
                        <li>That's a very good point&hellip;</li>
                        <li>Please keep in mind&hellip;</li>
                        <li>I can understand your hesitation, but&hellip;</li>
                        <li>I can appreciate that&hellip;</li>
                        <li>Thank you </li>
                        <li>Perfect </li>
                        <li>Great </li>
                        <li>One moment please </li>
                        <li>Excellent</li>
                        <li>That’s great, now&hellip;</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>

Answer 1

Don’t use a #some-id href to toggle your element but rather put in a reusable var an all-button’s common parent.

jsBin demo

1. 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)

2. 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...
     });
 
 });