Why do both SVG text titles disappear when setting one div to “display: none”? One disappearing is obvious and to be expected. But I want the other title to display when 1 div is set to “display: none”. The actual content looks like it is still there but the text is missing. Where did it go and how can I fix this? I need to be able to switch out the div depending on what page is being viewed. Both div’s are in the same WordPress sidebar widget from the current theme. Thanks!

HTML Code:

<aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope="" itemtype="https://schema.org/WPSideBar">
<section id="text-10" class="widget widget_text">
<div class="widget-wrap">           
<div class="textwidget">
<div class="bid-result">
<!--SVG TITLE HEADER Our Certified Results-->
<div class="widget-title mid-title">
<svg class="svg-title">
  <defs>
    <linearGradient id="grad-orange" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(226, 69, 38);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(34, 34, 34);stop-opacity:1" />
    </linearGradient>
  </defs>
<text fill="url(#grad-orange)" x="165" y="97%" text-anchor="middle">Our Certified Results</text>
  Sorry, your browser does not support inline SVG.
</svg>
</div>
<!--END SVG TITLE HEADER-->
[bid_result]
</div>

<div class="about-jr">
<!--SVG TITLE HEADER WHO IS J.R. STEVENS?-->
<div class="widget-title mid-title">
<svg class="svg-title">
  <defs>
    <linearGradient id="grad-orange" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(226, 69, 38);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(34, 34, 34);stop-opacity:1" />
    </linearGradient>
  </defs>
<text fill="url(#grad-orange)" x="159" y="97%" viewBox="0 0 100 100" text-anchor="middle">WHO IS J.R. STEVENS?</text>
  Sorry, your browser does not support inline SVG.
</svg>
</div>
<!--END SVG TITLE HEADER-->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
</div>
</div>
</div>
</section>
</aside>

CSS Code:

.sidebar, 
.about-jr,
.bid-result,
.home .members-title {
    display: none !important;
}

.home .sidebar-secondary, 
.page-id-4593 .sidebar-primary, 
.page-id-4593 .sidebar-primary .bid-result,
.page-id-4691 .sidebar-primary, 
.page-id-4691 .sidebar-primary .about-jr {
    display: block !important;
}

Read more here: Why do both SVG text titles disappear when setting one div to "display: none"?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: