How can we make the references section accordion

Greetings to Everyone,
In the article page, the references section is sometimes quite long and makes the article page quite long. Is there a way to convert the references section to accordion form?

For example, if the first 5 references appear on the web and the rest are stored with accordion. How can one proceed in this regard?

Hi @TarlaciSultan,

This likely would involve modifying your theme: https://docs.pkp.sfu.ca/pkp-theming-guide/en/

Is this something that you would be comfortable doing? If so, please indicate which theme, and specific version, as well as the version of OJS you’re using (e.g. 3.3.0-13).

-Roger
PKP Team

Dear Roger,
Thanks so much for the quick response.
We use OJS 3.3.0.8 and default theme.
Best

Maybe the following description will help (OJS source code customization).
Link to page: https://www.rocznik.ifp.uz.zgora.pl/index.php/fprnuz/article/view/194

OJS version: 3.3.0.5
Source code: templates\frontend\objects\article_details.tpl
My implementation:

{***** Citations ****************************************}
{if (count($parsedCitations) > 0)}
   <section class="item citations">
      <h3 class="label" id="titleCitations">{translate key="submission.citations"}
         &nbsp;&nbsp;
         <a class="collapseCitations" data-toggle="collapse" href="#collapsableCitations" role="button" aria-expanded="false" aria-controls="collapsableCitations">
            <i class="fa fa-caret-down"></i>
         </a>
      </h3>

      <div class="collapse" id="collapsableCitations">
         <div class="citations">
            {assign var=i value=0}
            {foreach from=$parsedCitations item=parsedCitation}
               {assign var=ref value=$parsedCitation->getCitationWithLinks()|strip_unsafe_html}
               {if $ref}
                  {if (preg_match("/href=/", $ref) == 1)}
                     {assign var=ref value=$ref|replace:"href=":"target='_blank' rel='noopener' href="}
                  {/if}

                  {* Add [] for http, if existing, remove *}
                  {if (preg_match("/<a/", $ref) == 1)}
                     {assign var=ref value=$ref|replace:"<a":"[<a"}
                     {assign var=ref value=$ref|replace:"[[<a":"[<a"}
                  {/if}

                  {if (preg_match("/a>/", $ref) == 1)}
                     {assign var=ref value=$ref|replace:"</a>":"</a>]"}
                     {assign var=ref value=$ref|replace:"</a>]]":"</a>]"}
                  {/if}
               {/if}

               {if $ref}
                  {***** Google Scholar ****************************************}
                  {assign var=googleScholar value=""}
                  {if $googleScholarOn}
                     {* Citation - only http address ($ref|strpos:"<a" != 0) *}
                     {if ($parsedCitationsEx[$i] && ($ref|strpos:"." > 0))}
                        {assign var=search value=$parsedCitationsEx[$i]}
                        {assign var=search value=trim($search)}
                        {* Google recommendation max 256 characters *}
                        {assign var=search value=$search|substr:0:min($search|count_characters:true, 256)}
                        {assign var=search value=$search|replace:" ":"+"}
                        {assign var=googleScholar value="<a target='_blank' rel='noopener' href='https://scholar.google.com/scholar?hl=$currentLanguage&as_sdt=0%2C5&q=$search'>Google Scholar</a>"}
                     {/if}
                  {/if}

                  {if $googleScholar}
                     {assign var=separator value=" "}
                     {if ($ref|substr:-1 == ".") || ($ref|substr:-1 == ";")}
                        {assign var=separator value="<br>"}
                     {/if}

                     <p>{$ref}{$separator}[{$googleScholar}]</p>
                  {else}
                     <p>{$ref}</p>
                  {/if}
               {/if}

               {assign var=i value=$i + 1}
            {/foreach}
         </div>
      </div><!-- collapse citations -->
   </section><!-- item citations -->
{/if}

CSS

.obj_article_details .citations p {
    background: #f3f3f3;
    border-left: 2px solid #d6d6d6;
    display: block;
    padding: 10px 15px;
    margin: 15px 0;
}
1 Like

There was a change, but it did not become an accordion like the picture below.
At the same time, the number-year-PDF column on the right is at the bottom. (after the cache delete). May be our journal page REFERENCES codes different. https://www.jneurophilosophy.com/index.php/jnp/article/view/119

	{* References *}
		{if $parsedCitations || $publication->getData('citationsRaw')}
			<section class="item references">
				<h2 class="label">
					{translate key="submission.citations"}
				</h2>
				<div class="value">
					{if $parsedCitations}
						{foreach from=$parsedCitations item="parsedCitation"}
							<p>{$parsedCitation->getCitationWithLinks()|strip_unsafe_html} {call_hook name="Templates::Article::Details::Reference" citation=$parsedCitation}</p>
						{/foreach}
					{else}
						{$publication->getData('citationsRaw')|escape|nl2br}
					{/if}
				</div>
			</section>
		{/if}

	</div><!-- .main_entry -->

	<div class="entry_details">

I added collapse to your code and tested it - the result is in the attached image.

{* References *}
   <section class="item citations">
      <h3 class="label" id="titleCitations">{translate key="submission.citations"}
         &nbsp;&nbsp;
         <a class="collapseCitations" data-toggle="collapse" href="#collapsableCitations" role="button" aria-expanded="false" aria-controls="collapsableCitations">
            <i class="fa fa-caret-down"></i>
         </a>
      </h3>

      <div class="collapse" id="collapsableCitations">
         <div class="citations">
            {if $parsedCitations || $publication->getData('citationsRaw')}
               <section class="item references">
                  {*** <h2 class="label">
                     {translate key="submission.citations"}
                  </h2> ***}
                  <div class="value">
                     {if $parsedCitations}
                        {foreach from=$parsedCitations item="parsedCitation"}
                           <p>{$parsedCitation->getCitationWithLinks()|strip_unsafe_html} {call_hook name="Templates::Article::Details::Reference" citation=$parsedCitation}</p>
                        {/foreach}
                     {else}
                        {$publication->getData('citationsRaw')|escape|nl2br}
                     {/if}
                  </div>
               </section>
            {/if}
         </div>
      </div>
   </section>

One element that should be added.
Plugin - Custom Header Plugin


Source code:

<script>
$('.fa-caret-up').on('click', function() {
   if ($(this).hasClass('fa-caret-up')) {
      $(this).removeClass('fa-caret-up').addClass('fa-caret-down');
   } else {
      $(this).removeClass('fa-caret-down').addClass('fa-caret-up');
   }
});
</script>

<script>
$('.fa-caret-down').on('click', function() {
   if ($(this).hasClass('fa-caret-down')) {
      $(this).removeClass('fa-caret-down').addClass('fa-caret-up');
   } else {
      $(this).removeClass('fa-caret-up').addClass('fa-caret-down');
   }
});
</script>