Joomla 3 Show different modules on same position depending on toggler

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.

Solution

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>