Home Hide link if href is blank, and then display a different button?
Reply: 2

Hide link if href is blank, and then display a different button?

Kim Tran
1#
Kim Tran Published in 2017-01-06 04:39:17Z

I have a link and div within each of my list items. If the link HAS an href then I want to make sure the div is hidden within its list item and the link appear just normal.

However if the link DOES NOT have a href (e.g. href=""), then I want to add the class .show to the div so I can show it. I also want to hide the link at the same time.

Or is there a better way to do this? Thanks

<style>
  .nolinkdiv { display:none; }
  .show { display:block!important; }
</style>

<ul>
  <li>
     <a href="/register.html">Register</a>
     <div class="nolinkdiv">Register Coming Soon</div>
  </li>
  <li>
     <a href="">Register</a>
     <div class="nolinkdiv">Register Coming Soon</div>
  </li>
</ul>
undefined
2#
undefined Reply to 2017-01-06 04:43:38Z

You don't need JavaScript for this:

.nolinkdiv { display:none; }
ul li a[href=""] {
  display: none;
}
ul li a[href=""] + div {
  display: block;
}
Gaurav joshi
3#
Gaurav joshi Reply to 2017-01-06 04:48:11Z

$( document ).ready(function() {
    $('ul li').each(function(idx, li) {
        var LI = $(this);
        var hrefValue = LI.find("a").attr('href');
        if(hrefValue) {
            LI.find("div").hide()
        } else {
            LI.find("a").hide()
        }
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
     <a href="/register.html">Register</a>
     <div class="">Register Coming Soon</div>
  </li>
  <li>
     <a href="">Register</a>
     <div class="">Register Coming Soon</div>
  </li>
</ul>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.250793 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO