Show and Hide Div With Matching Class Name On Click

Question

I am still getting to grips with jQuery and wondered if anyone had a suggestion for this?

Basically on click I want to show the div with the matching class, so if you click the btn with class '.project1' then it should show the content div with the same class of '.project1'.

I'm just stuck on how it would find this so any suggestions would be awesome :)

Thanks in advance.

Snippet:

$('div[class*="project"]').click(function (e) {
	$(this).closest('.content').show();
});

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>


<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>

CodePen: https://codepen.io/nickelse/pen/mYrOdz?editors=1111

Eddie · Accepted Answer · 2019-05-13 10:28:04Z

One option is to use data() to store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

$('div[class*="project"]').click(function (e) {
    var project = $(this).data("project");        //Get the data-project of the clicked element
    $(".content.project" + project).toggle();     //Toggle the element with content and project class
});

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn" data-project="1">BTN 1</div>   <!-- Add data-project on HTML-->
<div class="project2 btn" data-project="2">BTN 2</div>
<div class="project3 btn" data-project="3">BTN 3</div>
<div class="project4 btn" data-project="4">BTN 4</div>


<div class="project1 content" data-project="1">CONTENT 1</div>
<div class="project2 content" data-project="2">CONTENT 2</div>
<div class="project3 content" data-project="3">CONTENT 3</div>
<div class="project4 content" data-project="4">CONTENT 4</div>

Zenoo · Accepted Answer · 2019-05-13 10:15:10Z

You need to find the project number you clicked on.

You can do that by filtering the classes of the button you clicked on and extracting the number :

+[...this.classList].find(c => c.startsWith('project')).replace('project', '');

Then all you have to do is toggle the targeted project content :

$('.content.project'+project).toggle();

Here's a working example:

$('div[class^="project"]').on('click', function(){
  const project = +[...this.classList].find(c => c.startsWith('project')).replace('project', '');
  
  $('.content.project'+project).toggle();
});

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>


<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>

Dacre Denny · Accepted Answer · 2019-05-13 10:17:28Z

Toggling based on class matching is one of the harder thing to do in JQuery, however to achieve what you require you could do the following:

/* When a btn is clicked */
$('.btn').click(function(e) {

  /* Extract the classes of this button element */
  const classes = $(this).attr('class');

  /* Parse the project class part of the classes string */
  const projectClass = classes.match(/project\d+/)[0];

  /* Construct a matcher for the projects corresponding
  content and "toggle" the content's visiblity */
  $('.content.' + projectClass).toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>


<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>

Aya Salama · Accepted Answer · 2019-05-13 10:49:08Z

You can try to use regex to the class started with "project" and then show or hide it

$('.btn').click(function (e) {
    var classArray = $(this).attr("class"),
    re = /^project[0-9]+/ ,
    className = re.exec(classArray)[0];
    $('.content.'+ className).toggle();
});

$('.btn').click(function (e) {
    var classArray = $(this).attr("class"),
    re = /^project[0-9]+/ ,
    className = re.exec(classArray)[0];
    $('.content.'+ className).toggle();
});

.content {
    display: none
}
.btn {
    cursor:pointer
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>

<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>

Collectives™ on Stack Overflow

Show and Hide Div With Matching Class Name On Click

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related