CODEWITHSUNDEEP
javascriptjqueryhtml
mecab1995
mecab1995

Reputation: 171

How to select the first item in list by default with jquery

Hello i want select the first item in list by default.So when i open the view i want the item Plafond sécurité sociale under Général to be selected by default.

When i open the view it seems that my item is selected but it returns quickly closed and i'am using Jquery 3.3.1

$(function () {
    $(".a.mdc-list-item:first").one("click", function (event) {
        event.preventDefault();
   
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <a class="mdc-list-item" style="width:100%;margin-right:3px;margin-left:3px;">
          <div class="col-sm">
            <div class="row" data-toggle="collapse" data-target="#général" style="cursor:pointer">
              <span class="user" style="font-weight:bold">Général</span>
            </div>
          </div>
          <div class="col-sm">
            <div class="col-md-1 chevron-down" data-toggle="collapse" data-target="#général" style="float:right;margin-right:0px">
              <i class="général_arrow material-icons float-right material-expand ripple" style="color: #0047FD !important;">
                         expand_more
                         </i>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div id="général" class="collapse">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <a class="mdc-list-item" tauxPlafonds="PSS" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
                   Plafond sécurité sociale
                   </a>
          <a class="mdc-list-item" tauxPlafonds="SMIC" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
                   Smic
                   </a>
          <a class="mdc-list-item" tauxPlafonds="CSG" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
                   CSG CRDS
                   </a>
          <a class="mdc-list-item" tauxPlafonds="AGM" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
                   Abattement gérant majoritaire
                   </a>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 923

Answers (3)

Osama
Osama

Reputation: 3040

With css only create class active

.active {
    background-color: #CCC;
}

Add this class to your first tag

  <a class="mdc-list-item active" tauxPlafonds="PSS" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
               Plafond sécurité sociale
    </a>

To remove class use this function to add click event for all links except for the first 

 $("a.mdc-list-item:not(:first)").on("click", function (event) {
    $("a.mdc-list-item:first").removeClass("active");
 });

Upvotes: 0

RedKen
RedKen

Reputation: 157

<a> is an element, not a class attribute. You do not want to prefix it with a dot ..

Did you try ?

$(function () {
    $("a.mdc-list-item:first").on("click", function (event) {
        event.preventDefault();
        console.log($(this).html());

    });
});

Upvotes: 2

amja hussain
amja hussain

Reputation: 1

I dont get your point clearly,if you want to select the first element you can use this code at your function,

$(function () {
$(".mdc-list-item:first-child").css("background-color", "yellow");
        $(".mdc-list-item:first-child").on("click", function (event) {
            event.preventDefault();

        });
    });

if suppose you dont ask this,tell me your need cleary

Upvotes: 0

Related Questions