Display Div with specific content when clicking on link

Question

Display Div with specific content when clicking on link

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Good morning, I'm creating this topic because I performed a search in the forum and found this solution here.

Opening a < div > when you click on a < a >? link

But I need a more specific solution.

I am developing a questionnaire, for each question, I created a HELP tag This tag should display a div when clicked (so far, that's all right)

Problem:

For each HELP tag I need to display specific content. That is, if the link is clicked on question one, the div next to it should be opened but with the specific content to help in question 1, if the link is clicked on question two, the content to be displayed should be referring to question two .. and so on.

My solution:

I can create N DIVs with an ID selector with the specific content for each tag. But I would like to simplify this process, something like: use a class to identify the div and compare which Link was clicked to display the specific element within that div, then I would use the same div always with only the different content ...

I think this is personal, I do not know if it was very clear.

Thanks for the attention

php javascript html jquery onclick

asked by anonymous 09.11.2016 / 16:26

2 answers

Function that returns the position of the smallest number in a vector Create tables in a mysql database hosted on Locaweb

score 2 · Answer 1

I really do not know if this is what I wanted, but from what I understood, I made this code to explain.

HTML

<button id="tag1">TAG1</button>
<button id="tag2">TAG2</button>

<div id="tagContent"></div>

CSS

div{

display:none;

}

jQuery

$('button').on("click", function() {
        switch($(this).attr('id')) {
    case 'tag1':
        var conteudo = 'conteudo 1';
        break;
    case 'tag2':
        var conteudo = 'conteudo 2';
        break;
        }
    $('div').text(conteudo);
    $('div').slideToggle();
});

score 1 · Answer 2

My approach uses a hidden element within the link itself, which when clicked copies the html content from it to the presentation div.

I think this makes it easier to edit content, especially if there are a lot of links, and with dynamic content coming from the database.

I recommend that all content is always entirely in the html, and the script does only the necessary manipulation.

$('a.link').click(function(event) {
  event.preventDefault();
  $('div.content').html($('div', this).html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="#" class="link">Link 1<div style="display:none">Conteudo do link 1</div></a>
<a href="#" class="link">Link 2<div style="display:none">Conteudo do link 2</div></a>
<a href="#" class="link">Link 3<div style="display:none">Conteudo do link 3</div></a>
<div class="content"></div>