CODEWITHSUNDEEP
javascriptphpjqueryhtmllaravel
Abdallah Sakre
Abdallah Sakre

Reputation: 915

Hiding an echo after clicking a dropdown tag in laravel

I have the below code that will show the count of notifications. I need to hide the number upon clicking the dropdown menu.

<li class="dropdown">
    <a href="#" class="dropdown-toggle" 
                data-toggle="dropdown" 
                role="button" 
                aria-haspopup="true" 
                aria-expanded="false"
     >
          <span class="glyphicon glyphicon-globe"></span>
          Notifications 
          <span class="badge">{{count(auth()->user()->notifics)}}</span>
     </a>
     <ul class="dropdown-menu">
<li>

Upvotes: 0

Views: 506

Answers (3)

Dejvid
Dejvid

Reputation: 470

I guess you are not using jQuery, so I used pure javascript for the answer.

If you want to completely remove the badge then use this: Set your <a> tag like this:

<a href="#" id="button_id" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-globe"></span>Notifications <span class="badge">{{count(auth()->user()->notifics)}}</span></a>

Then using javascript:

<script>document.getElementById("button_id").addEventListener("click", function(e){
  e.preventDefault();
  document.getElementById("button_id").innerHTML = "<span class='glyphicon glyphicon-globe'></span>Notifications";
});
</script>

If you want to temporarily hide the badge then:

Set your <a> tag like this:

<a href="#" id="button_id" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-globe"></span>Notifications <span id="hide_me" class="badge">{{count(auth()->user()->notifics)}}</span></a>

And use this javascript code to hide it:

<script>document.getElementById("button_id").addEventListener("click", function(e){
  e.preventDefault();
  document.getElementById("hide_me").style.display = "none";
});
</script>

To show it back, use:

document.getElementById("hide_me").style.display = "block";

Upvotes: 0

Julius Fasema
Julius Fasema

Reputation: 902

try this.

<li class="dropdown">
          <div id="itemStatus"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-globe"></span>Notifications <span class="badge">{{count(auth()->user()->notifics)}}</span></a></div>
          <ul class="dropdown-menu" onclick="showFunction()">
<li>

//javascript

<script>
function showFunction() {
  var x = document.getElementById("itemStatus");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Upvotes: 1

Martin Dimitrov
Martin Dimitrov

Reputation: 1304

If I understand correctly, you want to hide the <span class="badge"> element. There are many ways to do this. One of them is using jQuery as follows

$(".dropdown-toggle").click(function() {
  $('.badge').hide();
});

You can use a vanilla JS onclick event also, if you prefer to not use jQuery and change add either style="display:none" or hidden to the element.

Upvotes: 1

Related Questions