使用 Javascript/CSS 展开/折叠 div 时交换三角形图标

Question

I need to swap icon and text based on the toggle using CSS. Initially the ribbon will be hidden. How do I do the icon and text swap based on the css class my JavaScript is assigning? is it the sliding door kind of technique?

HTML:

     <div id="ribbonHide">
                <a class="toolTipHover" href="#">
                    <div class="downArrowSmall">
                        <span class="ribbonHideToolTipOpen">Display the Ribbon</span> 
                        <span class="ribbonHideToolTipClose">Hide the Ribbon</span>
                    </div>
                </a>
            </div>

JavaScript:

 $('.toolTipHover > div').on('click', function() {
     $('#s4-ribbonrow').toggle();
     $(this).toggleClass('downArrowSmall upArrowSmall');
     FixRibbonAndWorkspaceDimensions();
});

Answer 1

Adding some more context could be useful, but here is my guess to what you need. You should at least use a function (Edit: I see you use a bind now) that toggles everything and i would use one span, so something like this:

<script type="text/javascript">
function ToggleArrow(arrow)
{
   $('#s4-ribbonrow').toggle();
   $(arrow).toggleClass('downArrowSmall upArrowSmall');
   if($('#s4-ribbonrow').is(":visible"))
   {
     $(arrow).children(".ToolTip").html("Hide the Ribbon");
   }
   else
   {
     $(arrow).children(".ToolTip").html("Display the Ribbon");
   }
 FixRibbonAndWorkspaceDimensions(); 
}
</script>
        <div id="ribbonHide">
                <div class="downArrowSmall" onclick="ToggleArrow(this)">
                    <span class="ToolTip">Display the Ribbon</span> 
                </div>
        </div>

Answer 2

Remove the Inline script in the first place ...

Also block level elements should not be nested inside inline elements .. Means that it is not legal , but it might end up in problems later on..

// Select the immediate Div's inside the anchors
    $('.toolTipHover > div').on('click', function() {
         $('#s4-ribbonrow').toggle();
         $(this).toggleClass('downArrowSmall upArrowSmall'); // Toggle class
         FixRibbonAndWorkspaceDimensions();
    });