Bootstrap: Modal with dropdown for caption

Question

I would like to use the bootstrap modal to open a list of subtitles. But I would like to display the meaning only when clicked on the legend. Got a way? Don’t need to have styles just do a slidown.

I used a javascript to carry a div:

'<script type="text/javascript" language="javascript">
function abreFecha(sel) {
$(sel).slideToggle();
}
</script>'

<a class="btn btn-primary" data-toggle="modal" data-target="#modal-
mensagem"> 
<span class="glyphicon glyphicon-th-list"></span> Ver Legendas
</a>

<div class="modal fade" id="modal-mensagem">
<div class="modal-dialog">
    <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
<span>×</span></button> 
         </div>
         <div class="modal-body">

  <?php 
       include 'includes/legenda.php';
        ?>
             <br>
             <div id="sigla"> O significado vai aqui</div>   

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
     </div>
</div>

caption.php:

 <div class="container-fluid">
 <div class="row">
<a href="javascript:abreFecha('#sigla')" class="col-md-1">SS</a>
<a href="javascript:abreFecha('#sigla')" class="col-md-1">ABC</a>
<a href="javascript:abreFecha('#sigla')" class="col-md-1">ECO</a>


</div>
</div>

So now you’re opening a modal with a few acronyms, and clicking opens the div with the meaning. The question now is: How to display a different text in the same div ? Knowing that each acronym has a caption? I would like to have the meaning on the caption page, so it is cleaner the main page.

Answer 1

To change the content of <div id="sigla"> O significado vai aqui</div>

create a function for each onclik event from each link

function ss() {
document.getElementById("sigla").innerHTML = "<p>AP Apartamento = é a abreviação de apartamento/<p><p>TAL	<span style='color:red'>TALcoisa =  é a abreviação de apartamento de tal coisa</span></p>";
}

function abc() {
document.getElementById("sigla").innerHTML = "<p>Geom Geometria = é a abreviação de geometria/<p><p>TAL	<span style='color:blue'>TALcoisa =  é a abreviação de geometria de tal coisa</span></p>";
}

function eco() {
document.getElementById("sigla").innerHTML = "<p>Agr Agricultura = é a abreviação de agricultura/<p><p>TAL	<span style='color:green'>TALcoisa =  é a abreviação de agricultura de tal coisa</span></p>";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a class="btn btn-primary" data-toggle="modal" data-target="#modal-mensagem"> 
<span class="glyphicon glyphicon-th-list"></span> Ver Legendas
</a>

<div class="modal fade" id="modal-mensagem">
<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">
			<span>×</span></button> 
		</div>
		<div class="modal-body">
			<div class="container-fluid">
				<div class="row">
					<a href="#" class="col-md-1" onclick="ss()">SS</a>
					<a href="#" class="col-md-1" onclick="abc()">ABC</a>
					<a href="#" class="col-md-1" onclick="eco()">ECO</a>
				</div>
			</div>
			
			<br>
			<div id="sigla"></div>   
		
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
		</div>
	</div>
</div>
</div>

Answer 2

I believe that what you want can be achieved without extra javascript, using the bootstrap accordion. Another option would still be a navigation with vertical tabs. See this example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <div class="container">
    <h2>Legendas</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
      <span class="glyphicon glyphicon-th-list"></span> Legendas
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
      
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Legendas</h4>
          </div>
          <div class="modal-body">
            <p>Clique na sigla para ver o significado.</p>

            <!-- início do accordion -->
            <div class="panel-group" id="accordion">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">SS</a>
                  </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                  <div class="panel-body">Significado de SS.</div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">ABC</a>
                  </h4>
                </div>
                <div id="collapse2" class="panel-collapse collapse">
                  <div class="panel-body">Significado de ABC.</div>
                </div>
              </div>
            </div> <!-- fim do accordion -->

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
        
      </div>
    </div> <!-- fim do modal -->
    
  </div>

Source

• https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
• https://www.w3schools.com/bootstrap/bootstrap_modal.asp