Using slideDown function with only one card

Question

I have HTML code with cards like this:

        <div class="row">
            <div class="col-md-6 text-center mt-5">
                <div class="card">
                    <div class="card-block">
                      <h4 class="card-title mt-2 mainContent">Title</h4>
                      <p class="card-text text-left p-3 mainContent">Content</p>
                    </div>
                    <div class="card-block expanded">
                        <p class="card-text mainContent">Expanded content</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 text-center mt-5">
                <div class="card">
                    <div class="card-block">
                        <h4 class="card-title mt-2 mainContent">Title</h4>
                        <p class="card-text text-left p-3 mainContent">Content</p>                    
                    </div>
                    <div class="card-block expanded">
                        <p class="card-text mainContent">Expanded content</p>
                    </div>    
                </div>
            </div>
        </div>

and jQuery script:

        $(document).ready(function(){
            $(".mainContent").click(function(){
                $(".expanded").slideToggle("slow");
            });
        });

I want to slide down expanded content of just one card by one click, but obviously this code slides down all cards. That works if I change code to id, like this:

        <div class="row">
            <div class="col-md-6 text-center mt-5">
                <div class="card">
                    <div class="card-block">
                      <h4 class="card-title mt-2 mainContent" id="mainContent">Title</h4>
                      <p class="card-text text-left p-3 mainContent">Content</p>
                    </div>
                    <div class="card-block expanded" id="expanded">
                        <p class="card-text mainContent">Expanded content</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 text-center mt-5">
                <div class="card">
                    <div class="card-block">
                        <h4 class="card-title mt-2 mainContent" id="mainContent1">Title</h4>
                        <p class="card-text text-left p-3 mainContent" id="mainContent1">Content</p>                    
                    </div>
                    <div class="card-block expanded" id="expanded1">
                        <p class="card-text mainContent" id="mainContent1">Expanded content</p>
                    </div>    
                </div>
            </div>
        </div>
        
        <script>
        $(document).ready(function(){
            $("#mainContent").click(function(){
                $("#expanded").slideToggle("slow");
            });
            $("#mainContent1").click(function(){
                $("#expanded1").slideToggle("slow");
            });
        });
        </script>

That code isn't efficient, because there will be more cards, so I will have to copy the same code. How to shorten this code?