Joomla 3 Show different modules on same position d

Question

there is my problem:

i have some toggle section. This section should show dynamical content depending on clicked trigger. So eg. by clicking "support", there should be some contact information/download support tool provided, on clicking "search" - search box etc.

My question is if it is possible to solve this with only one Module position or its need one position for each trigger?

Hope to describe this understandable =)

Any help is appreciated.

Thanks

Alex

UPD: I will try to explain with code:

Module position:

   if ($this->countModules('pos-1')) : 
        $module = JModuleHelper::getModules( 'pos-1' );
        foreach($modules as $m) : ?>
            <section class="mod_%echo $m->title%">
                <jdoc:include type="modules" name="pos-1" style="xhtml" />
            </section>
        endforeach;
    endif;

And Trigger:

if ($this->countModules('pos-1')) : 
    $module = JModuleHelper::getModules( 'pos-1' ); 
    foreach($module as $m) :
        <a class="btn-collapse collapsed" role="button" data-toggle="collapse" data-parent="#accordion" 
        href="#echo $m->title;" aria-expanded="true" aria-controls=" echo $m->title;">
            <i class="fa fa-building-o"></i> <? echo $m->title; ?>
        </a>                        
    endforeach;
endif;

So i have added two CustomHTML modules to this position.

Result:

<section ... class="mod_title1">
    content mod_one
    content mod_two
</section>
<section ... class="mod_title2">
    content mod_one
    content mod_two
</section>

<a ... href="#mod_title1" ...>  mod_title1 </a>
<a ... href="#mod_title2" ...>  mod_title2 </a>

And should be:

<section ... class="mod_title1">
    content mod_one
</section>
<section ... class="mod_title2">
    content mod_two
</section>

<a ... href="#mod_title1" ...>  mod_title1 </a>
<a ... href="#mod_title2" ...>  mod_title2 </a>

So i think this is not possible with only one position adn should be solved with many.

Please correct me if i have it wrong.

UPD2: I was wrong. This is possible but not only via Template - also module chrome tempalte should be extended with own functin to render it right.

Answer 1

Not sure to understand your question but if your triggers are menu entries, you can tell your modules to be displayed only when those menu entries are selected.
Go into Extensions -> module manager, select the module you want and then in the module assignment tab -> Module assignment select "only on the pages selected" and select the menu entries you want.
You can let the modules in the same position. Your modules will be displayed in that position only when the assigned menu entry is active.
HTH

Answer 2

This could be done. You have to add a separate class to each module (assigned to the same module position) under:

Module Settings -> Advanced -> Module Class Suffix

So if you have added suff1 and suff2 classes you could toggle them using:

jQuery(document).ready(function() {
  jQuery("div.suff1, div.suff2").on("click", function() {
    jQuery(this).parent().children().toggle();
  });
});

div {
  width: 180px;
  height: 100px;
  color: white;
}
div.suff1 {
  background: orange;
  display: none;
}
div.suff2 {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="suff1">Module 1</div>
  <div class="suff2">Module 2</div>
</div>