How to show nth div when click nth p tag using jQuery

-1

I have a structure like this

<div>

  <p></p> 1

  <p></p> 2

  <p></p> 3

  <p></p> 4

  <p></p> 5

   .   .  

   .   .  

   .   .  

</div>



<div></div> 1

<div></div> 2

<div></div> 3

<div></div> 4

<div></div> 5

 ..    ..   

 ..    ..   

 ..    ..

There are exactly equal number of p tags and div tags( don't consider the div containing the p itself)

Initially all the <div></div> are hidden (Except the div containing <p></p> tags)

Question:
1) I want that when the nth p tag is clicked I want to show nth div.

edited Dec 31 '18 at 14:04

Mamun

26.7k71630

asked Dec 31 '18 at 6:42

Tushar Jajodia

You want based on the selected <p> tags to open up the <div> that it's referencing from? Example <p></p>1 to open <div></div>1

– Minial
Dec 31 '18 at 6:48

add a comment |

-1

I have a structure like this

<div>

  <p></p> 1

  <p></p> 2

  <p></p> 3

  <p></p> 4

  <p></p> 5

   .   .  

   .   .  

   .   .  

</div>



<div></div> 1

<div></div> 2

<div></div> 3

<div></div> 4

<div></div> 5

 ..    ..   

 ..    ..   

 ..    ..

There are exactly equal number of p tags and div tags( don't consider the div containing the p itself)

Initially all the <div></div> are hidden (Except the div containing <p></p> tags)

Question:
1) I want that when the nth p tag is clicked I want to show nth div.

edited Dec 31 '18 at 14:04

Mamun

26.7k71630

asked Dec 31 '18 at 6:42

Tushar Jajodia

You want based on the selected <p> tags to open up the <div> that it's referencing from? Example <p></p>1 to open <div></div>1

– Minial
Dec 31 '18 at 6:48

add a comment |

-1

I have a structure like this

<div>

  <p></p> 1

  <p></p> 2

  <p></p> 3

  <p></p> 4

  <p></p> 5

   .   .  

   .   .  

   .   .  

</div>



<div></div> 1

<div></div> 2

<div></div> 3

<div></div> 4

<div></div> 5

 ..    ..   

 ..    ..   

 ..    ..

There are exactly equal number of p tags and div tags( don't consider the div containing the p itself)

Initially all the <div></div> are hidden (Except the div containing <p></p> tags)

Question:
1) I want that when the nth p tag is clicked I want to show nth div.

edited Dec 31 '18 at 14:04

Mamun

26.7k71630

asked Dec 31 '18 at 6:42

Tushar Jajodia

I have a structure like this

<div>

  <p></p> 1

  <p></p> 2

  <p></p> 3

  <p></p> 4

  <p></p> 5

   .   .  

   .   .  

   .   .  

</div>



<div></div> 1

<div></div> 2

<div></div> 3

<div></div> 4

<div></div> 5

 ..    ..   

 ..    ..   

 ..    ..

There are exactly equal number of p tags and div tags( don't consider the div containing the p itself)

Initially all the <div></div> are hidden (Except the div containing <p></p> tags)

Question:
1) I want that when the nth p tag is clicked I want to show nth div.

<div>

  <p></p> 1

  <p></p> 2

  <p></p> 3

  <p></p> 4

  <p></p> 5

   .   .  

   .   .  

   .   .  

</div>



<div></div> 1

<div></div> 2

<div></div> 3

<div></div> 4

<div></div> 5

 ..    ..   

 ..    ..   

 ..    ..

<div>

  <p></p> 1

  <p></p> 2

  <p></p> 3

  <p></p> 4

  <p></p> 5

   .   .  

   .   .  

   .   .  

</div>



<div></div> 1

<div></div> 2

<div></div> 3

<div></div> 4

<div></div> 5

 ..    ..   

 ..    ..   

 ..    ..

javascript jquery

edited Dec 31 '18 at 14:04

Mamun

26.7k71630

asked Dec 31 '18 at 6:42

Tushar Jajodia

edited Dec 31 '18 at 14:04

Mamun

26.7k71630

asked Dec 31 '18 at 6:42

Tushar Jajodia

edited Dec 31 '18 at 14:04

Mamun

26.7k71630

edited Dec 31 '18 at 14:04

Mamun

26.7k71630

edited Dec 31 '18 at 14:04

Mamun

26.7k71630

asked Dec 31 '18 at 6:42

Tushar Jajodia

asked Dec 31 '18 at 6:42

Tushar Jajodia

asked Dec 31 '18 at 6:42

Tushar Jajodia

You want based on the selected <p> tags to open up the <div> that it's referencing from? Example <p></p>1 to open <div></div>1

– Minial
Dec 31 '18 at 6:48

add a comment |

You want based on the selected <p> tags to open up the <div> that it's referencing from? Example <p></p>1 to open <div></div>1

– Minial
Dec 31 '18 at 6:48

You want based on the selected <p> tags to open up the <div> that it's referencing from? Example <p></p>1 to open <div></div>1

– Minial
Dec 31 '18 at 6:48

add a comment |

2 Answers
2

active

oldest

votes

You can consider the text inside the element. You can match the index of clicked p element based on which you can show the specific div element:

$('p').click(function(){

  var index = $(this).index();

  $('div').not('.pContainer').eq(index).show();

})

div{display: none;}

.pContainer{display: block;}

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

<div class="pContainer">

  <p>1</p> 

  <p>2</p> 

  <p>3</p> 

  <p>4</p> 

  <p>5</p> 

</div>

*********

<div>1</div> 

<div>2</div> 

<div>3</div> 

<div>4</div> 

<div>5</div>

edited Dec 31 '18 at 10:01

answered Dec 31 '18 at 6:51

Mamun

26.7k71630

Thank you for reply but, I want to put something else in lower div.

– Tushar Jajodia
Dec 31 '18 at 11:03

@TusharJajodia, what you want to put inside the matching div?

– Mamun
Dec 31 '18 at 11:21

Messages from Database

– Tushar Jajodia
Jan 1 at 15:51

Actually the thing is The initial <p> tags will contain the name of the person and the corresponding <div> tags below will contain all the conversation. So when user will click the <p> tag i want to show them the full message. Hope making little sense

– Tushar Jajodia
Jan 1 at 15:53

@TusharJajodia, this is completely different issue regarding collecting the information from Database. I will suggest you to post different question for that......

– Mamun
Jan 2 at 4:05

add a comment |

try this and let me know if it worked

function paraClick(index) {

  $('.p_click').css('display','none')

  $('.p_click').eq(index).css('display','block')

}

.p_click{display:none}

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

<div>

  <p onclick="paraClick(0)">P 1</p> 

  <p onclick="paraClick(1)">P 2</p> 

  <p onclick="paraClick(2)">P 3</p> 

  <p onclick="paraClick(3)">P 4</p> 

  <p onclick="paraClick(4)">P 5</p>

</div>



<div class="p_click">D 1</div> 

<div class="p_click">D 2</div> 

<div class="p_click">D 3</div> 

<div class="p_click">D 4</div> 

<div class="p_click">D 5</div>

answered Dec 31 '18 at 6:49

user6656728

Isn't there any way i can know how many prev sibling are there of the particular item that i have clicked.

– Tushar Jajodia
Dec 31 '18 at 11:05

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53984421%2fhow-to-show-nth-div-when-click-nth-p-tag-using-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

You can consider the text inside the element. You can match the index of clicked p element based on which you can show the specific div element:

$('p').click(function(){

  var index = $(this).index();

  $('div').not('.pContainer').eq(index).show();

})

div{display: none;}

.pContainer{display: block;}

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

<div class="pContainer">

  <p>1</p> 

  <p>2</p> 

  <p>3</p> 

  <p>4</p> 

  <p>5</p> 

</div>

*********

<div>1</div> 

<div>2</div> 

<div>3</div> 

<div>4</div> 

<div>5</div>

edited Dec 31 '18 at 10:01

answered Dec 31 '18 at 6:51

Mamun

26.7k71630

Thank you for reply but, I want to put something else in lower div.

– Tushar Jajodia
Dec 31 '18 at 11:03

@TusharJajodia, what you want to put inside the matching div?

– Mamun
Dec 31 '18 at 11:21

Messages from Database

– Tushar Jajodia
Jan 1 at 15:51

Actually the thing is The initial <p> tags will contain the name of the person and the corresponding <div> tags below will contain all the conversation. So when user will click the <p> tag i want to show them the full message. Hope making little sense

– Tushar Jajodia
Jan 1 at 15:53

@TusharJajodia, this is completely different issue regarding collecting the information from Database. I will suggest you to post different question for that......

– Mamun
Jan 2 at 4:05

add a comment |

You can consider the text inside the element. You can match the index of clicked p element based on which you can show the specific div element:

$('p').click(function(){

  var index = $(this).index();

  $('div').not('.pContainer').eq(index).show();

})

div{display: none;}

.pContainer{display: block;}

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

<div class="pContainer">

  <p>1</p> 

  <p>2</p> 

  <p>3</p> 

  <p>4</p> 

  <p>5</p> 

</div>

*********

<div>1</div> 

<div>2</div> 

<div>3</div> 

<div>4</div> 

<div>5</div>

edited Dec 31 '18 at 10:01

answered Dec 31 '18 at 6:51

Mamun

26.7k71630

Thank you for reply but, I want to put something else in lower div.

– Tushar Jajodia
Dec 31 '18 at 11:03

@TusharJajodia, what you want to put inside the matching div?

– Mamun
Dec 31 '18 at 11:21

Messages from Database

– Tushar Jajodia
Jan 1 at 15:51

Actually the thing is The initial <p> tags will contain the name of the person and the corresponding <div> tags below will contain all the conversation. So when user will click the <p> tag i want to show them the full message. Hope making little sense

– Tushar Jajodia
Jan 1 at 15:53

@TusharJajodia, this is completely different issue regarding collecting the information from Database. I will suggest you to post different question for that......

– Mamun
Jan 2 at 4:05

add a comment |

You can consider the text inside the element. You can match the index of clicked p element based on which you can show the specific div element:

$('p').click(function(){

  var index = $(this).index();

  $('div').not('.pContainer').eq(index).show();

})

div{display: none;}

.pContainer{display: block;}

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

<div class="pContainer">

  <p>1</p> 

  <p>2</p> 

  <p>3</p> 

  <p>4</p> 

  <p>5</p> 

</div>

*********

<div>1</div> 

<div>2</div> 

<div>3</div> 

<div>4</div> 

<div>5</div>

edited Dec 31 '18 at 10:01

answered Dec 31 '18 at 6:51

Mamun

26.7k71630

You can consider the text inside the element. You can match the index of clicked p element based on which you can show the specific div element:

$('p').click(function(){

  var index = $(this).index();

  $('div').not('.pContainer').eq(index).show();

})

div{display: none;}

.pContainer{display: block;}

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

<div class="pContainer">

  <p>1</p> 

  <p>2</p> 

  <p>3</p> 

  <p>4</p> 

  <p>5</p> 

</div>

*********

<div>1</div> 

<div>2</div> 

<div>3</div> 

<div>4</div> 

<div>5</div>

$('p').click(function(){

  var index = $(this).index();

  $('div').not('.pContainer').eq(index).show();

})

div{display: none;}

.pContainer{display: block;}

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

<div class="pContainer">

  <p>1</p> 

  <p>2</p> 

  <p>3</p> 

  <p>4</p> 

  <p>5</p> 

</div>

*********

<div>1</div> 

<div>2</div> 

<div>3</div> 

<div>4</div> 

<div>5</div>

$('p').click(function(){

  var index = $(this).index();

  $('div').not('.pContainer').eq(index).show();

})

div{display: none;}

.pContainer{display: block;}

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

<div class="pContainer">

  <p>1</p> 

  <p>2</p> 

  <p>3</p> 

  <p>4</p> 

  <p>5</p> 

</div>

*********

<div>1</div> 

<div>2</div> 

<div>3</div> 

<div>4</div> 

<div>5</div>

edited Dec 31 '18 at 10:01

answered Dec 31 '18 at 6:51

Mamun

26.7k71630

edited Dec 31 '18 at 10:01

answered Dec 31 '18 at 6:51

Mamun

26.7k71630

answered Dec 31 '18 at 6:51

Mamun

26.7k71630

answered Dec 31 '18 at 6:51

Mamun

26.7k71630

Thank you for reply but, I want to put something else in lower div.

– Tushar Jajodia
Dec 31 '18 at 11:03

@TusharJajodia, what you want to put inside the matching div?

– Mamun
Dec 31 '18 at 11:21

Messages from Database

– Tushar Jajodia
Jan 1 at 15:51

Actually the thing is The initial <p> tags will contain the name of the person and the corresponding <div> tags below will contain all the conversation. So when user will click the <p> tag i want to show them the full message. Hope making little sense

– Tushar Jajodia
Jan 1 at 15:53

@TusharJajodia, this is completely different issue regarding collecting the information from Database. I will suggest you to post different question for that......

– Mamun
Jan 2 at 4:05

add a comment |

Thank you for reply but, I want to put something else in lower div.

– Tushar Jajodia
Dec 31 '18 at 11:03

@TusharJajodia, what you want to put inside the matching div?

– Mamun
Dec 31 '18 at 11:21

Messages from Database

– Tushar Jajodia
Jan 1 at 15:51

Actually the thing is The initial <p> tags will contain the name of the person and the corresponding <div> tags below will contain all the conversation. So when user will click the <p> tag i want to show them the full message. Hope making little sense

– Tushar Jajodia
Jan 1 at 15:53

@TusharJajodia, this is completely different issue regarding collecting the information from Database. I will suggest you to post different question for that......

– Mamun
Jan 2 at 4:05

Thank you for reply but, I want to put something else in lower div.

– Tushar Jajodia
Dec 31 '18 at 11:03

@TusharJajodia, what you want to put inside the matching div?

– Mamun
Dec 31 '18 at 11:21

Messages from Database

– Tushar Jajodia
Jan 1 at 15:51

Actually the thing is The initial <p> tags will contain the name of the person and the corresponding <div> tags below will contain all the conversation. So when user will click the <p> tag i want to show them the full message. Hope making little sense

– Tushar Jajodia
Jan 1 at 15:53

@TusharJajodia, this is completely different issue regarding collecting the information from Database. I will suggest you to post different question for that......

– Mamun
Jan 2 at 4:05

add a comment |

try this and let me know if it worked

function paraClick(index) {

  $('.p_click').css('display','none')

  $('.p_click').eq(index).css('display','block')

}

.p_click{display:none}

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

<div>

  <p onclick="paraClick(0)">P 1</p> 

  <p onclick="paraClick(1)">P 2</p> 

  <p onclick="paraClick(2)">P 3</p> 

  <p onclick="paraClick(3)">P 4</p> 

  <p onclick="paraClick(4)">P 5</p>

</div>



<div class="p_click">D 1</div> 

<div class="p_click">D 2</div> 

<div class="p_click">D 3</div> 

<div class="p_click">D 4</div> 

<div class="p_click">D 5</div>

answered Dec 31 '18 at 6:49

user6656728

Isn't there any way i can know how many prev sibling are there of the particular item that i have clicked.

– Tushar Jajodia
Dec 31 '18 at 11:05

add a comment |

try this and let me know if it worked

function paraClick(index) {

  $('.p_click').css('display','none')

  $('.p_click').eq(index).css('display','block')

}

.p_click{display:none}

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

<div>

  <p onclick="paraClick(0)">P 1</p> 

  <p onclick="paraClick(1)">P 2</p> 

  <p onclick="paraClick(2)">P 3</p> 

  <p onclick="paraClick(3)">P 4</p> 

  <p onclick="paraClick(4)">P 5</p>

</div>



<div class="p_click">D 1</div> 

<div class="p_click">D 2</div> 

<div class="p_click">D 3</div> 

<div class="p_click">D 4</div> 

<div class="p_click">D 5</div>

answered Dec 31 '18 at 6:49

user6656728

Isn't there any way i can know how many prev sibling are there of the particular item that i have clicked.

– Tushar Jajodia
Dec 31 '18 at 11:05

add a comment |

try this and let me know if it worked

function paraClick(index) {

  $('.p_click').css('display','none')

  $('.p_click').eq(index).css('display','block')

}

.p_click{display:none}

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

<div>

  <p onclick="paraClick(0)">P 1</p> 

  <p onclick="paraClick(1)">P 2</p> 

  <p onclick="paraClick(2)">P 3</p> 

  <p onclick="paraClick(3)">P 4</p> 

  <p onclick="paraClick(4)">P 5</p>

</div>



<div class="p_click">D 1</div> 

<div class="p_click">D 2</div> 

<div class="p_click">D 3</div> 

<div class="p_click">D 4</div> 

<div class="p_click">D 5</div>

answered Dec 31 '18 at 6:49

user6656728

try this and let me know if it worked

function paraClick(index) {

  $('.p_click').css('display','none')

  $('.p_click').eq(index).css('display','block')

}

.p_click{display:none}

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

<div>

  <p onclick="paraClick(0)">P 1</p> 

  <p onclick="paraClick(1)">P 2</p> 

  <p onclick="paraClick(2)">P 3</p> 

  <p onclick="paraClick(3)">P 4</p> 

  <p onclick="paraClick(4)">P 5</p>

</div>



<div class="p_click">D 1</div> 

<div class="p_click">D 2</div> 

<div class="p_click">D 3</div> 

<div class="p_click">D 4</div> 

<div class="p_click">D 5</div>

function paraClick(index) {

  $('.p_click').css('display','none')

  $('.p_click').eq(index).css('display','block')

}

.p_click{display:none}

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

<div>

  <p onclick="paraClick(0)">P 1</p> 

  <p onclick="paraClick(1)">P 2</p> 

  <p onclick="paraClick(2)">P 3</p> 

  <p onclick="paraClick(3)">P 4</p> 

  <p onclick="paraClick(4)">P 5</p>

</div>



<div class="p_click">D 1</div> 

<div class="p_click">D 2</div> 

<div class="p_click">D 3</div> 

<div class="p_click">D 4</div> 

<div class="p_click">D 5</div>

function paraClick(index) {

  $('.p_click').css('display','none')

  $('.p_click').eq(index).css('display','block')

}

.p_click{display:none}

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

<div>

  <p onclick="paraClick(0)">P 1</p> 

  <p onclick="paraClick(1)">P 2</p> 

  <p onclick="paraClick(2)">P 3</p> 

  <p onclick="paraClick(3)">P 4</p> 

  <p onclick="paraClick(4)">P 5</p>

</div>



<div class="p_click">D 1</div> 

<div class="p_click">D 2</div> 

<div class="p_click">D 3</div> 

<div class="p_click">D 4</div> 

<div class="p_click">D 5</div>

answered Dec 31 '18 at 6:49

user6656728

answered Dec 31 '18 at 6:49

user6656728

answered Dec 31 '18 at 6:49

user6656728

answered Dec 31 '18 at 6:49

user6656728

Isn't there any way i can know how many prev sibling are there of the particular item that i have clicked.

– Tushar Jajodia
Dec 31 '18 at 11:05

add a comment |

Isn't there any way i can know how many prev sibling are there of the particular item that i have clicked.

– Tushar Jajodia
Dec 31 '18 at 11:05

Isn't there any way i can know how many prev sibling are there of the particular item that i have clicked.

– Tushar Jajodia
Dec 31 '18 at 11:05

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk