CODEWITHSUNDEEP
javascriptjqueryhtml
Nick Else
Nick Else

Reputation: 154

Show and Hide Div With Matching Class Name On Click

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

Upvotes: 3

Views: 1180

Answers (4)

Aya Salama
Aya Salama

Reputation: 1518

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>

Upvotes: 0

Eddie
Eddie

Reputation: 26844

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>

Upvotes: 3

Dacre Denny
Dacre Denny

Reputation: 30370

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>

Upvotes: 1

Zenoo
Zenoo

Reputation: 12880

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>

Upvotes: 2

Related Questions