Jquery: click to show certain element meanwhile hide all others

Question

I am trying to learn jquery. And I wonder if there would be a better way of doing this.

    $(document).ready(function(){
  $(".Biceps__Main").click(function() { 
    $('#biceps__info').css({'display': 'block'});
    $('#Extensor_Capri_Ulnaris__info, #Brachioradialis__info, #Flexor_Capri_Radialis__info').css({'display': 'none'});
  }); 
});

$(document).ready(function(){
  $(".Extensor_Capri_Ulnaris__Main").click(function() { 
    $('#Extensor_Capri_Ulnaris__info').css({'display': 'block'});
    $('#biceps__info, #Brachioradialis__info, #Flexor_Capri_Radialis__info').css({'display': 'none'});
  }); 
});

$(document).ready(function(){
  $(".Brachioradialis__Main").click(function() { 
    $('#Brachioradialis__info').css({'display': 'block'});
    $('#biceps__info, #Extensor_Capri_Ulnaris__info, #Flexor_Capri_Radialis__info').css({'display': 'none'});
  }); 
});

$(document).ready(function(){
  $(".Flexor_Capri_Radialis__Main").click(function() { 
    $('#Flexor_Capri_Radialis__info').css({'display': 'block'});
    $('#biceps__info, #Extensor_Capri_Ulnaris__info, #Brachioradialis__info').css({'display': 'none'});
  }); 
});

It's supposed to do so when you click on either, apple, orange, watermelon or grape, it should show an infobox, and hide the other because they are in the same position.

<a class="Flexor_Capri_Radialis__Main">
                        <g id="Flexor_Capri_Radialis__Main" class="main" data-name="Flexor Capri Radialis__Main">
                            <path id="Flexor_Capri_Radialis__Left" data-name="Flexor Capri Radialis__Left"
                                d="M124,274.45s1.79-8.94,0-23.34c-2.45,2.12-4.8,6.59-4.8,9.49S121.11,271.21,124,274.45Z" />
                            <path id="Flexor_Capri_Radialis__Right" data-name="Flexor Capri Radialis__Right"
                                d="M268.64,274.45s-1.79-8.94,0-23.34c2.46,2.12,4.8,6.59,4.8,9.49S271.54,271.21,268.64,274.45Z" />
                        </g>
                    </a>
                    <a class="Brachioradialis__Main">
                        <g id="Brachioradialis__Main" class="main">
                            <path id="Brachioradialis__Left"
                                d="M112,333.51s3.26-9.11,3.42-31.08a44.06,44.06,0,0,0,4.72-18.54V271.36s-4.88-14.49-17.57-33.52c-2.45,11.88-2.45,10.25-2.45,14.32v16.43A130.19,130.19,0,0,0,107.65,301C109,311.38,110.42,327.49,112,333.51Z" />
                            <path id="Brachioradialis__Right"
                                d="M280.61,333.51s-3.25-9.11-3.42-31.08a44.06,44.06,0,0,1-4.72-18.54V271.36s4.89-14.49,17.58-33.52c2.44,11.88,2.44,10.25,2.44,14.32v16.43A129.67,129.67,0,0,1,285,301C283.7,311.38,282.24,327.49,280.61,333.51Z" />
                        </g>
                    </a>
                    <a class="Extensor_Capri_Ulnaris__Main">
                        <g class="main" id="Extensor_Capri_Ulnaris__Main" data-name="Extensor Capri Ulnaris__Main">
                            <path id="Extensor_Capri_Ulnaris__Left" data-name="Extensor Capri Ulnaris__Left"
                                d="M102.28,334.16h7.16s-3.09-26.52-5.53-36.61-7.16-24.24-7.16-28.31v18.39S100.82,305.69,102.28,334.16Z" />
                            <path id="Extensor_Capri_Ulnaris__Right" data-name="Extensor Capri Ulnaris__Right"
                                d="M290.37,334.16h-7.16s3.09-26.52,5.53-36.61,7.16-24.24,7.16-28.31v18.39S291.84,305.69,290.37,334.16Z" />
                        </g>
                    </a>
                    <a class="Biceps__Main">
                        <g id="Biceps__Main" class="main">
                            <ellipse id="Biceps__Left" cx="120.05" cy="213.3" rx="27.83" ry="10.75"
                                transform="translate(-110.16 296.44) rotate(-80.48)" />
                            <ellipse id="Biceps__Right" cx="272.6" cy="213.3" rx="10.75" ry="27.83"
                                transform="translate(-31.51 48) rotate(-9.52)" />
                        </g>
                    </a>

Sorry guys, I should have told you better.

So I have this SVG with a body and all the muscles in the body, you can click on each muscle, and the show an infobox. Can you see in the code above (That's only some of them) that's have I have done it till now, and I have actually done it, it works well. But I am thinking the jquery file is gonna be huge if I keep doing that with all the muscle in the body.

And for each muscle I have a PHP file which I have included under the

Like this:

<section id="muscleContent">
        <?php include('../muscularSystem/muscleInfo/Biceps.php');?>
        <?php include('../muscularSystem/muscleInfo/Extensor_Capri_Ulnaris.php');?>
        <?php include('../muscularSystem/muscleInfo/Brachioradialis.php');?>
        <?php include('../muscularSystem/muscleInfo/Flexor_Capri_Radialis.php');?>
    </section>

And each muscle file looks like this:

<section id="biceps__info" class="info__onHover">
    <h2>Biceps</h2>
    <p>The biceps is a large muscle that lies on the front of the upper arm between the shoulder and the
        elbow. Both heads of the muscle arise on the scapula and join to form a single muscle belly which is
        attached to the upper forearm. While the biceps crosses both the shoulder and elbow joints, its main
        function is at the elbow where it flexes the forearm and supinates the forearm. Both these movements are
        used when opening a bottle with a corkscrew: first biceps screws in the cork (supination), then it pulls
        the cork out (flexion).</p>

    <h3>Structure</h3>
    <p>The biceps is one of three muscles in the anterior compartment of the upper arm, along with the
        brachialis muscle and the coracobrachialis muscle, with which the biceps shares a nerve supply. The
        biceps muscle has two heads, the short head and the long head, distinguished according to their origin
        at the coracoid process and supraglenoid tubercle of the scapula, respectively. From its origin on
        the glenoid, the long head remains tendinous as it passes through the shoulder joint and through the
        intertubercular groove of the humerus. Extending from its origin on the coracoid, the tendon of the
        short head runs adjacent to the tendon of the coracobrachialis as the conjoint tendon. Unlike the other
        muscles in the anterior compartment of the arm, the biceps muscle crosses two joints, the shoulder joint
        and the elbow joint.</p>
    <p>Both heads of the biceps join in the middle upper arm to form a single muscle mass usually near the
        insertion of the deltoid to form a common muscle belly, although several anatomic studies have
        demonstrated that the muscle bellies remain distinct structures without confluent fibers. As the
        muscle extends distally, the two heads rotate 90 degrees externally before inserting onto the radial
        tuberosity. The short head inserts distally on the tuberosity while the long head inserts proximally
        closer to the apex of the tuberosity. The bicipital aponeurosis, also called the lacertus fibrosus,
        is a thick fascial band that organizes close to the musculotendinous junction of the biceps and radiates
        over and inserts onto the ulnar part of the antebrachial fascia.</p>
    <p>The tendon that attaches to the radial tuberosity is partially or completely surrounded by a bursa, the
        bicipitoradial bursa, which ensures frictionless motion between the biceps tendon and the proximal
        radius during pronation and supination of the forearm.</p>
    <p>Two muscles lie underneath the biceps brachii. These are the coracobrachialis muscle, which like the
        biceps attaches to the coracoid process of the scapula, and the brachialis muscle which connects to the
        ulna and along the mid-shaft of the humerus. Besides those, the brachioradialis muscle is adjacent to
        the biceps and also inserts on the radius bone, though more distally.</p>
</section>

Hope this is a bit better.

score 2 · Answer 1 · answered Aug 17 '20 at 07:13

2

Give all the elements the same class (e.g. fruit). Then do

$(document).ready(function(){
  const $fruits = $('.fruit');
  $fruits.click(function() { 
    $fruits.css({'display': 'none'});
    $(this).css({'display': 'block'});
  }); 
});

Clicking on any of the selected (fruit) elements will:

Hide all elements with class fruit.
Show the clicked element (via this).

answered Aug 17 '20 at 07:13

Felix Kling

795,719
175
1,089
1,143

Hello Felix, thanks for your comment, but I made an edit to my post since I felt like I didn't describe it very well. – Nikolaj Aug 17 '20 at 07:35
I don't see how that would change the answer. – Felix Kling Aug 17 '20 at 09:03

duck · Answer 2 · 2020-08-17T08:06:49.830


    $(document).ready(function(){
      const fruits_cls = [$('.apple'),$('.orange'),$('.watermelon')];
      const fruits_ids = [$('#apple'),$('#orange'),$('#watermelon')];
      for(let i = 0; i < fruits_cls.length; i++){
        var arr = [0, 1, 2];
        arr.splice(i, 1);
        fruits_ids[i].show();
        arr.forEach(id=>{
          fruits_ids[i].hide();
        });
      }
    });

similar to @Felix Kling post, I just thought using show and hide will be a better option.

for the OP: you can plug this in: (I haven't test the code, if any error occurs please let me know)

var strs = ['Biceps__Main', 'Extensor_Capri_Ulnaris__Main', 'Brachioradialis__Main', 'Flexor_Capri_Radialis__Main'];

var cls = [], counter = -1, indices = [];
var ids = arr.map(ar=>{counter++; indices.push(counter); cls.push(document.querySelector(`.${ar}`)); return document.getElementById(ar);});

$(document).ready(function(){
    indices.forEach(i=>{
        let arr = indices.concat();
        arr.splice(i, 1);
        cls.forEach(cl=>{
            cl.addEventListener('click', ()=>{
                ids[i].show();
                arr.map(ind=>{ids[ind].hide()});
            });
        });
    });
});

since you have mentioned It's supposed to do so when you click on either, apple, orange, watermelon or grape, it should show an infobox, and hide the other because they are in the same position.

I highly suggest to have a look at $(element).html(), if you don't have to position the text by the muscle, this method is much easier.

Hi duck, I made an edit to my post since I felt like I didn't describe it very well. — Nikolaj, Aug 17 '20 at 07:35

Jquery: click to show certain element meanwhile hide all others

2 Answers2