Hiding .innerHTML when another element (class) is display:none;

Question

I am trying to hide the innerHTML "Welcome," (class = welcome-text) text when a certain elements class = display none; Below is the code I have

// Redesign of the login button 
jQuery(document).ready(function ($) {
$("#siteNavBar_ctl00_btnLogin").removeClass("saml-login-button").addClass("btn btn-primary");


 $(".top-nav-bar .nav-container .main-nav-submenu-container .user-login").css({
  'position': 'relative',
  'top' : '-60px',
  'right': '0px',
  });
  
  /*
  $(".iconss").click(function() {
    window.location = "http://google.com";
 });
 */
  $(".secondicon").click(function() {
    window.location = "http://www.facebook.com";
 
 
});



var newNode = document.createElement('div');
var referenceNode = document.querySelector('#siteNavBar_loginToggle');
newNode.className = "username-displayed";
newNode.innerHTML='<span class="welcome-text">Welcome,</span>';
referenceNode.parentNode.insertBefore(newNode, referenceNode);



$( ".username-displayed" ).append( $( ".user-name" ) );




});
$(function(){
  $('dl.portletSectionJump dd a:contains("Custom Info")').hide();  
});

I need it to be hidden only when the class .d-block is set to display: none;

** Please notice the VAR NEWNODE section. I am new to Javascript so I apologize is something isn't super clear.

Possible duplicate of this https://stackoverflow.com/questions/178325/how-do-i-check-if-an-element-is-hidden-in-jquery — Martin, Jun 01 '18 at 18:54

score 1 · Accepted Answer · answered Jun 01 '18 at 19:09

Here's working code for the same,

function hide() {
    $(".d-block").hide();
}

function show() {
    $(".d-block").show();
}

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
        var value = $(".d-block").css("display");
        console.log(value);
        if (!value || "none" === value) {
            $(".welcome-text").hide();
        } else {
            $(".welcome-text").show();
        }
    });    
});

var target = document.getElementsByClassName('d-block')[0];
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span class="welcome-text">Welcome, </span>User</h1>
<hr/>
<div>
    <p>Lorem</p>
</div>
<div>
    <p class="d-block">Lorem Imsum</p>
</div>
<button onClick="hide()">Hide</button><button onClick="show()">Show</button>

MutationObserver reference is taken from this answer.

No if you hide `d-block` class element then `welcome-text` class will be hidden @SeanWatkins - you can run and check the output — Vivek, Jun 01 '18 at 19:25
Sorry I was mistaken, you are 100% correct. Thank you so much! I hope to be as good as you one day.. 10 years from now or so i am sure! — Sean Watkins, Jun 01 '18 at 19:38

score 0 · Answer 2 · answered Jun 01 '18 at 18:54

0

I'm not sure what's going on in your code but this is the if statement you want

if ($('.d-block').css('display') == 'none') {
  $('.welcome-text').hide()
}

answered Jun 01 '18 at 18:54

Sacha

322
1
8

I used this code, however it is still showing the welcome-text class? – Sean Watkins Jun 01 '18 at 19:32
Could you show your code? – Sacha Jun 01 '18 at 19:50

score 0 · Answer 3 · answered Jun 01 '18 at 18:55

0

You need to check if you element is hidden, then you hide your div

if($('.d-block').is(':hidden')){
    $('.welcome-text').hide();
}

answered Jun 01 '18 at 18:55

Martin

552
4
16

The hide() and show() functions at the top of your code are useless and might mess with jquery's homonyms functions! – Martin Jun 01 '18 at 19:31

Hiding .innerHTML when another element (class) is display:none;

3 Answers3