CODEWITHSUNDEEP
jqueryhtml
PVBRaju
PVBRaju

Reputation: 95

How to perform action on the next element of clicked element

In the below code if i click on anchor tag (.account) i want to show the <div class="submenu_quick_full"> of that specific <li class="module1">,How can I do please help me?

<ul class"main">
<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id1" onclick="Open_Quick_Full_Popup();">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>


<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id1" onclick="Open_Quick_Full_Popup();">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>
</ul>

Upvotes: 1

Views: 2329

Answers (4)

Apul Gupta
Apul Gupta

Reputation: 3034

If you are using jQuery, you should bind events instead of calling functions on element itself.

Your code should be:

<ul class"main">
<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id1">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>


<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id1">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>
</ul>
<script type="text/javascript">
 $("a.account").click(function(e) {
    $(this).next(".submenu_quick_full").show(); // you can use toggle if want to close as well
    // If not sure about position of div, use `siblings` instead
 });
</script>

As you mentioned that you want to show DIV, I am assuming that by default that is hidden. If not, you should write this CSS in your stylesheet:

.submenu_quick_full {
  display: none;
}

Another suggestion for you: ID value should be unique.

Upvotes: 0

mohamedrias
mohamedrias

Reputation: 18566

In your Open_Quick_Full_Popup() function, pass this. So it will become 

  <a class="account" id="account_id1" onclick="Open_Quick_Full_Popup(this);">

In your js:

function Open_Quick_Full_Popup(element) {
    $(element).next(".submenu_quick_full").toggle();
}

Instead of polluting the HTML with js code, i would prefer unobtrusive js like below:

$("a.account").on("click", function(event) {
    $(this).next(".submenu_quick_full").toggle();
    // am using toggle here because i assume that you want to show/hide the div on click
   // if you just wan to show use show() instead
});

Don't forget to add this in your CSS initially:

.submenu_quick_full {
  display: none;
}

DEMO

Upvotes: 1

Joel Anderson
Joel Anderson

Reputation: 535

If you pass this as a function argument in the html element event handler attribute, 

<a class="account" id="account_id1" onclick="Open_Quick_Full_Popup(this);">

Your function will have access to that DOM element.

function Open_Quick_Full_Popup(elementClicked)
{
    //next sibling of clicked element
    elementClicked.nextSibling;
}

Upvotes: 0

Akhilesh Bamhore
Akhilesh Bamhore

Reputation: 1

    <ul class"main">
<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id1" onclick="Open_Quick_Full_Popup(this.id);">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>


<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id2" onclick="Open_Quick_Full_Popup(this.id);">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>
</ul>

Upvotes: 0

Related Questions